Skip to main content

Styling

This guide covers how to style AppKit UI components using CSS variables and theming.

CSS import​

In your main CSS file, import the AppKit UI styles:

@import "@databricks/appkit-ui/styles.css";

This provides a default theme for your app using CSS variables.

Customizing theme​

AppKit UI uses CSS variables for theming, supporting both light and dark modes automatically.

Full variable list​

You can customize the theme by overriding CSS variables. See the CSS variables for the full list of variables.

Important

If you change any variable, you must change it for both light and dark mode to ensure consistent appearance across color schemes.

Color system​

AppKit UI uses the OKLCH color space for better perceptual uniformity. The format is:

oklch(lightness chroma hue)

Where:

  • lightness: 0-1 (0 = black, 1 = white)
  • chroma: 0-0.4 (saturation)
  • hue: 0-360 (color angle)

Semantic color variables​

Core colors​

  • --background / --foreground - Main background and text
  • --card / --card-foreground - Card backgrounds
  • --popover / --popover-foreground - Popover/dropdown backgrounds

Interactive colors​

  • --primary / --primary-foreground - Primary actions
  • --secondary / --secondary-foreground - Secondary actions
  • --muted / --muted-foreground - Muted/disabled states
  • --accent / --accent-foreground - Accent highlights

Status colors​

  • --destructive / --destructive-foreground - Destructive actions
  • --success / --success-foreground - Success states
  • --warning / --warning-foreground - Warning states

UI elements​

  • --border - Border colors
  • --input - Input field borders
  • --ring - Focus ring colors
  • --radius - Border radius

Charts​

  • --chart-1 through --chart-5 - Chart color palette
  • --sidebar-* - Sidebar-specific colors

See also​