3.4 KiB
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
- Env (build/deploy time) —
NEXT_PUBLIC_THEME_*. - Provider props (per mount) —
<MessagingInboxProvider theme={{ … }}>. - 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
# 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.