Dark Mode
Toggle between light and dark themes. Preference persists across tabs and page reloads.
How it works
DarkMode.js manages the toggle button in the navigation.
Clicking it adds or removes the html.dark class and
persists the preference in localStorage under
flat-cake-dark.
An inline script in head.php restores the class
before first paint — no flash of the wrong theme.
The storage event keeps multiple tabs in sync.
Architecture
<!-- head.php — runs before any CSS renders -->
<script>
if (localStorage.getItem('flat-cake-dark') === '1')
document.documentElement.classList.add('dark');
</script>
<!-- navigation.php — toggle button -->
<button id="dark-toggle" aria-pressed="false">...</button>
<!-- _dark.scss — CSS overrides for html.dark -->
html.dark {
--cb-surface: #1e1e1e;
--cb-border: #333;
/* ... all vars remapped */
}
Try it
Click the moon/sun icon in the navigation bar above, or use the button below:
Features
Zero flash
The inline script in <head> restores the dark class before any CSS renders — no white flash on reload.
Cross-tab sync
Uses the storage event so toggling in one tab updates all open tabs automatically.
Theme-aware
All --cb-brand derived colors adapt automatically. The brand color and particles work in both modes.