Theming

Fulldev UI uses the same CSS variable model as shadcn/ui. @fulldev/init writes the tokens below to src/styles/global.css. Change the variables there instead of editing component classes.

Every color has a light value in :root and a dark value in .dark. Colors are written in oklch().

Color tokens

Variable	Used for
`--background` / `--foreground`	Page background and default text
`--card` / `--card-foreground`	Card surfaces
`--popover` / `--popover-foreground`	Dropdowns, popovers, dialogs
`--primary` / `--primary-foreground`	Primary buttons, links, active states
`--secondary` / `--secondary-foreground`	Secondary buttons and badges
`--muted` / `--muted-foreground`	Subtle backgrounds and supporting text
`--accent` / `--accent-foreground`	Hover backgrounds
`--destructive` / `--destructive-foreground`	Errors and destructive actions
`--border`, `--input`, `--ring`	Borders, form field borders, focus rings
`--chart-1` to `--chart-5`	Chart series
`--sidebar-*`	Sidebar background, text, borders, and accents

Shape and typography

Variable	Used for
`--radius`	Base radius. `sm`, `md`, `lg`, `xl` derive from it
`--shadow-2xs` to `--shadow-2xl`	Elevation scale
`--font-sans`, `--font-mono`	Font families, set in `@theme inline`

Example

Change the brand color and corner radius:

:root {
  --primary: oklch(0.55 0.25 262);
  --primary-foreground: oklch(1 0 0);
  --radius: 0.75rem;
}

.dark {
  --primary: oklch(0.7 0.2 262);
  --primary-foreground: oklch(0.15 0 0);
}

Keep the same hue in light and dark mode and adjust lightness. Components pick up the change automatically because they only reference the semantic tokens.

Fonts

Set --font-sans and --font-mono in the @theme inline block. With Astro’s font API, point them at the CSS variables Astro generates:

@theme inline {
  --font-sans: var(--font-inter, ui-sans-serif, system-ui, sans-serif);
}

Block-level overrides

Blocks accept class and any other HTML attribute on their root element. Use that for one-off spacing or backgrounds instead of editing block source:

<Hero1Block class="bg-muted" id="hero" {...content} />

Sidebar