Theme toggle & dark mode
TokenForensics ships in both light and dark, designed as equals. The theme toggle is fixed in the top-right corner of every page — including this documentation site.
What it does
- OS default on first visit. With no saved preference, the interface follows your operating system's light/dark setting.
- One-click override. The toggle flips the theme and persists your
choice to
localStorage, so it survives reloads and navigation. - No flash. A tiny inline script in the root layout applies the theme class before first paint — you never see a flash of the wrong theme, even on a cold load.
How it works
The mechanism is class-based, not media-query based: a .dark class on the
<html> element drives every dark: style. That class is what lets your
explicit choice override the OS preference.
Note
Class-based theming is what makes the override possible. A pure
prefers-color-scheme approach can only follow the OS — it can't honor a
user who wants dark while their machine is set to light.
The toggle itself is a single button. Both the sun and moon icons are always rendered; CSS picks which one is visible. That means there is no hydration mismatch and no icon flicker on load.
Where it appears
| Surface | Behavior |
|---|---|
| Every app page | Toggle fixed top-right, above all content |
| This docs site | Same toggle, inherited from the root layout |
| First visit | Follows the OS setting |
| After a choice | Honors the persisted override |
Last updated