# Theming Guide This document provides a comprehensive guide for understanding and customizing the theming system in LibreDB Studio. ## Overview LibreDB Studio uses a modern theming architecture built on: - **Tailwind CSS v4** - CSS-first configuration with `@theme` directive - **shadcn/ui** - Accessible component library with CSS variable theming - **CSS Custom Properties** - Light and dark variable sets defined in `globals.css` > **Note:** Studio currently ships **dark-mode only**. The `.dark` class is applied > statically on the `` element in `src/app/layout.tsx`, so the light-mode variables > defined in `:root` are present but not reachable at runtime. There is no theme toggle yet > (see [Switching Themes](#switching-themes)). The light-mode values are documented below for > when runtime switching is added. ## Architecture ### Theme Configuration Flow ``` globals.css │ ├── :root (Light mode variables) ├── .dark (Dark mode variables) │ └── @theme inline │ └── Maps CSS variables to Tailwind utilities │ └── bg-background, text-foreground, etc. ``` ### File Structure ``` src/ └── app/ └── globals.css # Theme configuration (single source of truth) ``` ## CSS Variables ### Core Variables | Variable | Description | Usage | |----------|-------------|-------| | `--background` | Page background color | `bg-background` | | `--foreground` | Default text color | `text-foreground` | | `--card` | Card/panel background | `bg-card` | | `--card-foreground` | Card text color | `text-card-foreground` | | `--popover` | Popover/dropdown background | `bg-popover` | | `--popover-foreground` | Popover text color | `text-popover-foreground` | | `--primary` | Primary action color | `bg-primary`, `text-primary` | | `--primary-foreground` | Text on primary | `text-primary-foreground` | | `--secondary` | Secondary action color | `bg-secondary` | | `--secondary-foreground` | Text on secondary | `text-secondary-foreground` | | `--muted` | Muted/subtle background | `bg-muted` | | `--muted-foreground` | Muted text color | `text-muted-foreground` | | `--accent` | Accent/hover background | `bg-accent` | | `--accent-foreground` | Text on accent | `text-accent-foreground` | | `--destructive` | Destructive action color | `bg-destructive` | | `--destructive-foreground` | Text on destructive | `text-destructive-foreground` | | `--border` | Border color | `border-border` | | `--input` | Input border color | `border-input` | | `--ring` | Focus ring color | `ring-ring` | | `--radius` | Border radius base | `rounded-lg`, `rounded-md` | ### Chart Colors | Variable | Light (`:root`) | Dark (`.dark`) | Usage | |----------|-----------------|----------------|-------| | `--chart-1` | `#e76e50` | `#3b82f6` | Primary chart color | | `--chart-2` | `#2a9d90` | `#22c55e` | Secondary chart color | | `--chart-3` | `#274754` | `#f59e0b` | Tertiary chart color | | `--chart-4` | `#e8c468` | `#a855f7` | Quaternary chart color | | `--chart-5` | `#f4a462` | `#ec4899` | Quinary chart color | ## Dark Mode ### Current Configuration LibreDB Studio uses a dark-first design with the following color palette (based on Tailwind Zinc): ```css .dark { --background: #09090b; /* zinc-950 */ --foreground: #fafafa; /* zinc-50 */ --card: #0a0a0a; /* near zinc-950 */ --popover: #0a0a0a; --secondary: #27272a; /* zinc-800 */ --muted: #27272a; /* zinc-800 */ --accent: #27272a; /* zinc-800 */ --border: #27272a; /* zinc-800 */ --muted-foreground: #a1a1aa; /* zinc-400 */ } ``` ### Switching Themes > **Current state:** there is **no runtime theme switching**. Dark mode is forced by hardcoding > the `dark` class on `` in `src/app/layout.tsx`: > > ```tsx > > ``` > > The `next-themes` package is present in `package.json` but is **not wired up** — there is no > `` in the layout and no toggle component. To add a runtime light/dark toggle, you would wrap the app in `next-themes`' `ThemeProvider` (`attribute="class"`) instead of hardcoding the class, then add a toggle that flips the theme: ```tsx // Not yet implemented — illustrative only {children} ``` ## Tailwind v4 Integration ### The `@theme inline` Directive Tailwind CSS v4 introduces CSS-first configuration. The `@theme inline` directive maps CSS variables to Tailwind utility classes: ```css @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); /* ... */ } ``` This enables using semantic class names: ```jsx

Content

``` ### IDE Warnings Your IDE may show warnings like `Unknown at rule @theme`. This is expected because: - Tailwind v4's `@theme` directive is new - CSS validators don't recognize it yet - **It works correctly** - the build succeeds To suppress these warnings in VS Code, add to `.vscode/settings.json`: ```json { "css.lint.unknownAtRules": "ignore" } ``` ## Best Practices ### DO Use Theme Variables ```jsx // Good - uses theme variables