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 attributes, 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>