74 lines
3.4 KiB
Markdown
74 lines
3.4 KiB
Markdown
# Theming
|
|
|
|
The whole app is driven by **CSS variables** set on `<html>`. 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)** — `<MessagingInboxProvider theme={{ … }}>`.
|
|
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`.
|