Theming

What you get

Two blocks of CSS. :root holds the light theme's eight brand colors, the corners and the gutters; .dark holds the dark theme's eight brand colors. Both are needed: one block alone leaves the other theme with the default brand. For the library's own violet at the default corners, the Theme page writes:

:root {  --color-brand: rgb(115 71 217);  --color-brand-hover: rgb(95 53 184);  --color-brand-fg: rgb(255 255 255);  --color-brand-solid: rgb(115 71 217);  --color-brand-solid-fg: rgb(255 255 255);  --color-brand-subtle: rgb(245 244 255);  --color-brand-subtle-fg: rgb(95 53 184);  --color-brand-ring: rgb(191 178 255);  --radius-control: 8px;  --radius-badge: 6px;  --radius-card: 8px;  --radius-overlay: 12px;  --space-overlay: 1rem;  --space-surface: 1rem;  --space-surface-md: 1.5rem;  --space-drawer: 1.5rem;} .dark {  --color-brand: rgb(162 135 255);  --color-brand-hover: rgb(191 178 255);  --color-brand-fg: rgb(17 24 39);  --color-brand-solid: rgb(115 71 217);  --color-brand-solid-fg: rgb(255 255 255);  --color-brand-subtle: rgb(54 26 113);  --color-brand-subtle-fg: rgb(215 209 255);  --color-brand-ring: rgb(95 53 184);}

Where it goes

In your app's stylesheet, below the imports. The library sets its own values first, and the later rule wins, so a theme above @import 'grani/style.css' is overwritten.

@import 'tailwindcss';@import 'grani/style.css'; /* your theme from the Theme page */:root {  --color-brand: …;} .dark {  --color-brand: …;}

Colors

Every color is a variable: set it in :root for the light theme and in .dark for the dark one. Here is where the common ones paint; all of them follow.

Corners and gutters

Corners and gutters are lengths, one for every theme. --radius-control: 0 gives a square product, 1rem a soft one. The Theme page writes the gutters at the library's defaults; change them by hand.

Your own color

A color of your own is a variable for each theme and a Tailwind color over it. Put it below the imports; inline makes the class read the variable, so it changes with the theme.

/* src/style.css, below the imports */:root {  --highlight: oklch(0.95 0.06 95);}.dark {  --highlight: oklch(0.42 0.08 95);}@theme inline {  --color-highlight: var(--highlight);}

Then it is a class like any other, in both themes:

<p class="bg-highlight text-fg">Marked for review</p>

The size of controls

The size of every control is not a variable: it is an option of the plugin, in main.ts.

createApp(App).use(createGrani({ size: 'md' })).mount('#app')

Dark theme

The dark theme is the dark class on <html>. Tailwind's own dark: follows the system instead; point it at the class, below the imports, so your classes and grani agree.

@custom-variant dark (&:where(.dark, .dark *));