0Pricing
CSS Academy · Lesson

Automatic and Manual Dark Mode Toggle

Build a theme toggle that respects system preference by default and lets users override it manually.

The Goal

An ideal dark mode implementation: auto-detects the OS preference by default, and provides a toggle button that lets users override it independently, with the preference persisted across page loads.

Architecture Overview

Three states to handle:

  1. System preference: use prefers-color-scheme with CSS variables
  2. User override: dark: set a class or data attribute on <html>
  3. User override: light: set a different class to prevent auto dark

All lessons in this course

  1. prefers-color-scheme Media Query
  2. CSS Variables for Theming
  3. color-scheme Property
  4. Automatic and Manual Dark Mode Toggle
← Back to CSS Academy