# Theming The whole app is driven by **CSS variables** set on ``. Tailwind colors map to those variables, so switching light/dark or rebranding is just different values — no component edits. Defaults match the LynkedUp Pro dashboard (dark + amber `#FDA913`). ## Three ways to theme 1. **Env (build/deploy time)** — `NEXT_PUBLIC_THEME_*`. 2. **Provider props (per mount)** — ``. 3. **Live in-app** — the **Appearance** panel (⚙️ by your name) sets accent/radius/gradient/mode and persists to `localStorage`. ## Env variables | Var | Default | Notes | |---|---|---| | `NEXT_PUBLIC_THEME_MODE` | `dark` | `light` \| `dark` \| `system` | | `NEXT_PUBLIC_THEME_ACCENT` | `#FDA913` | any CSS color; overrides accent in both schemes | | `NEXT_PUBLIC_THEME_ACCENT_FG` | `#1a1205` | text/icon color on accent surfaces | | `NEXT_PUBLIC_THEME_RADIUS_CARD` | `20px` | card/panel radius | | `NEXT_PUBLIC_THEME_RADIUS_CONTROL` | `10px` | button/input radius | | `NEXT_PUBLIC_THEME_FONT_SANS` | Inter stack | any font-family string | | `NEXT_PUBLIC_THEME_GRADIENT` | amber→coral | brand mark / hero gradient | ## Token reference Semantic tokens (Tailwind class → CSS var). Use these, never raw hex. | Purpose | Tailwind | CSS var | Dark | Light | |---|---|---|---|---| | App background | `bg-bg` | `--c-bg` | `#060608` | `#f6f7f9` | | Sidebar / bars | `bg-surface` | `--c-surface` | `#08080b` | `#ffffff` | | Panels / cards | `bg-panel` | `--c-panel` | `#0e0e13` | `#ffffff` | | Elevated (menus) | `bg-elevated` | `--c-elevated` | `#15151c` | `#ffffff` | | Hover wash | `bg-hover` | `--c-hover` | white 5.5% | ink 4.5% | | Border | `border-border` | `--c-border` | white 8% | ink 10% | | Strong border | `border-border-strong` | `--c-border-strong` | white 14% | ink 16% | | Primary text | `text-ink` | `--c-ink` | `#ededf1` | `#14151a` | | Muted text | `text-muted` | `--c-muted` | `#8c8c94` | `#5c6069` | | Dim text | `text-dim` | `--c-dim` | `#63636b` | `#8b909a` | | Accent | `bg-accent` / `text-accent` | `--c-accent` | `#FDA913` | `#e8920a` | | Accent text | `text-accent-fg` | `--c-accent-fg` | `#1a1205` | `#ffffff` | | Accent tint | `bg-accent-soft` | `--c-accent-soft` | amber 12% | amber 12% | | Success/Warning/Danger/Info | `*-success/warning/danger/info` | `--c-success` … | — | — | | Card radius | `rounded-card` | `--r-card` | 20px | 20px | | Control radius | `rounded-control` | `--r-control` | 10px | 10px | ## Rebrand in 30 seconds ```bash # apps/web/.env.local NEXT_PUBLIC_THEME_MODE="light" NEXT_PUBLIC_THEME_ACCENT="#6c5ce7" NEXT_PUBLIC_THEME_RADIUS_CARD="14px" NEXT_PUBLIC_THEME_RADIUS_CONTROL="8px" NEXT_PUBLIC_THEME_GRADIENT="linear-gradient(135deg,#6c5ce7,#00cec9)" NEXT_PUBLIC_BRAND_NAME="Acme" ``` Reload — sidebar, buttons, chips, gradient mark, focus rings, and both color schemes update. ## Editing the base palette Change the `darkTokens` / `lightTokens` / `defaultTheme` objects in `packages/messaging-inbox-sdk/src/config.ts`. Keep the matching fallbacks in `apps/web/app/globals.css` (`:root { … }`) in sync so pre-hydration paint matches. ## How light/dark actually toggles `theme.ts#applyTheme` writes the token vars to `document.documentElement.style` and toggles the `dark` class (Tailwind `darkMode: 'class'`). The provider persists the chosen scheme to `localStorage` (`lynkd.scheme`) and theme overrides to `lynkd.theme`.