Dark Mode

Dark mode is toggled via body.dark. All CSS tokens are redefined in the body.dark { } block. Theme preference is saved in localStorage as fj-theme.

Token Flip (Live)

These boxes show the current value of each token. Toggle dark mode (top-right) to see them flip.

—bg

—white (card)

—gray-900 (text)

—green

—red

—accent

Component Rendering (Live)

Same components, rendered with current theme tokens. Toggle dark mode to compare.

Server

Online

Main Server

192.168.1.88

Alert

Critical

Tunnel Down

SSH-PROXY · 2min ago

⚠

Warning callout in current theme

✓

Success callout in current theme

Gray Scale Inversion

50

100

200

300

400

500

600

700

800

900

Toggle dark mode : les valeurs basses (50, 100) deviennent sombres, les valeurs hautes (800, 900) deviennent claires.

Adding dark mode to a new component

/* Light mode (default) */
.my-component { background: var(--white); color: var(--gray-700); }

/* Dark override — only if the component uses hardcoded colors */
body.dark .my-component { background: #1e293b; color: #f1f5f9; }

Best practice: If you only use tokens (var(--white), var(--gray-700)), you usually don’t need a dark override — the tokens already flip. Only add body.dark rules for hardcoded colors, borders, or shadows that need different values.