Beautiful dark mode, accessible & persistent
This page demonstrates a practical dark-mode setup using CSS variables, an accessible toggle, and `localStorage` to remember the user's choice.
Respects system theme
Defaults to your OS preference, but user selection persists.
Accessible toggle
Keyboard-focusable, ARIA `aria-pressed` and visible focus ring.
Easy to customize
Tweak CSS variables at the top to change colors quickly.
Responsive
Designed to look good on phone, tablet, and desktop.
Tiny code sample
<script>
// read stored theme, apply to <html>:
// localStorage.setItem('site-theme', 'dark' | 'light' | null)
</script>