# Theming Customize the library using CSS variables. The UI library ships a compiled stylesheet (`@lottiefiles/creator-plugins-ui/styles.css`) with default theme tokens and component styles. ## Importing styles ```tsx import "@lottiefiles/creator-plugins-ui/styles.css"; ``` ## Dark mode Apply `.dark` on your `` element or a wrapping container to switch token values. ```tsx // Option 1: Global dark mode {/* app */} // Option 2: Scope dark mode to a section/container

``` ## Overriding variables Pass the tokens you want to customize into the [ThemeProvider](/en/creator-plugins/ui-library/components/theme-provider) component. You only need to include the variables you want to override — any tokens you omit keep their default values. ```tsx import { ThemeProvider } from "@lottiefiles/creator-plugins-ui"; ; ``` Creator also supports multiple themes in its own interface. To make your plugin automatically match Creator's theme see [Match Creator's current theme](/en/creator-plugins/ui-library/components/theme-provider#match-creators-current-theme). ## Available variables The library stores color values as full HSL values (for example `hsl(170 100% 30%)`) and consumes them directly via `var(--token)`. ### Default (`:root`) ```css :root { --background: hsl(0 0% 100%); --foreground: hsl(205 16% 15%); --card: hsl(0 0% 100%); --card-foreground: hsl(205 16% 15%); --popover: hsl(0 0% 100%); --popover-foreground: hsl(205 16% 15%); --primary: hsl(175 99% 31%); --primary-foreground: hsl(0 0% 100%); --primary-hover: hsl(170 100% 25%); --secondary: hsl(210 15% 24%); --secondary-foreground: hsl(0 0% 100%); --secondary-hover: hsl(210 15% 28%); --muted: hsl(204 26% 96%); --muted-foreground: hsl(207 12% 44%); --accent: hsl(204 26% 96%); --accent-foreground: hsl(205 16% 15%); --destructive: hsl(11 100% 43%); --destructive-foreground: hsl(0 0% 100%); --destructive-hover: hsl(11 100% 34%); --border: hsl(207 22% 92%); --input: hsl(207 22% 92%); --ring: hsl(170 100% 38%); --radius: 0.5rem; --chart-1: hsl(170 100% 30%); --chart-2: hsl(210 70% 50%); --chart-3: hsl(40 90% 50%); --chart-4: hsl(280 65% 50%); --chart-5: hsl(340 75% 50%); --sidebar: hsl(0 0% 98%); --sidebar-foreground: hsl(205 16% 15%); --sidebar-primary: hsl(170 100% 30%); --sidebar-primary-foreground: hsl(0 0% 100%); --sidebar-accent: hsl(204 26% 96%); --sidebar-accent-foreground: hsl(205 16% 15%); --sidebar-border: hsl(207 22% 92%); --sidebar-ring: hsl(170 100% 38%); } ``` ### Dark (`.dark`) ```css .dark { --background: hsl(198 16.7% 11.8%); --foreground: hsl(0 0% 100%); --card: hsl(198 16.7% 11.8%); --card-foreground: hsl(0 0% 100%); --popover: hsl(198 16.7% 11.8%); --popover-foreground: hsl(0 0% 100%); --primary: hsl(175 99% 31%); --primary-foreground: hsl(0 0% 100%); --primary-hover: hsl(175 99% 38%); --secondary: hsl(210 15% 24%); --secondary-foreground: hsl(0 0% 100%); --secondary-hover: hsl(210 15% 28%); --muted: hsl(206 18% 8%); --muted-foreground: hsl(207 13% 67%); --accent: hsl(206 18% 8%); --accent-foreground: hsl(0 0% 100%); --destructive: hsl(11 100% 43%); --destructive-foreground: hsl(0 0% 100%); --destructive-hover: hsl(11 100% 34%); --border: hsla(224 97% 85% / 0.1); --input: hsla(224 97% 85% / 0.1); --ring: hsl(175 99% 38%); --chart-1: hsl(170 100% 40%); --chart-2: hsl(210 70% 60%); --chart-3: hsl(40 90% 60%); --chart-4: hsl(280 65% 60%); --chart-5: hsl(340 75% 60%); --sidebar: hsl(0 0% 5%); --sidebar-foreground: hsl(0 0% 100%); --sidebar-primary: hsl(170 100% 30%); --sidebar-primary-foreground: hsl(0 0% 100%); --sidebar-accent: hsl(206 18% 8%); --sidebar-accent-foreground: hsl(0 0% 100%); --sidebar-border: hsla(224 97% 85% / 0.1); --sidebar-ring: hsl(170 100% 38%); } ``` ### Tailwind aliases (`@theme inline`) These tokens are Tailwind utility aliases generated from the base tokens above — they power IntelliSense for classes like `text-14`, `bg-primary-hover`, and `rounded-lg`. You don't normally override them via `ThemeProvider`; override the base `:root` / `.dark` tokens instead and this layer remaps automatically. ```css @theme inline { /* Colors — mapped from CSS variables for IntelliSense */ --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-background: var(--background); --color-foreground: var(--foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-primary-hover: var(--primary-hover); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-secondary-hover: var(--secondary-hover); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-destructive-hover: var(--destructive-hover); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); /* Font sizes */ --text-10: 0.625rem; --text-11: 0.6875rem; --text-12: 0.75rem; --text-13: 0.8125rem; --text-14: 0.875rem; --text-15: 0.9375rem; --text-16: 1rem; --text-18: 1.125rem; --text-20: 1.25rem; --text-24: 1.5rem; /* Border radius */ --radius-sm: calc(var(--radius) - 0.25rem); --radius-md: calc(var(--radius) - 0.125rem); --radius-lg: var(--radius); /* Font family */ --font-sans: "DM Sans Variable", "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; } ``` ## Component-level styling - Use component variants (for example `Button` `variant` and `size`) for supported visual options. - You can also pass in classNames to style components.