# You're doing dark mode wrong. > A one-page field guide for developers and designers about the most common dark-mode mistake: the two-state theme toggle. The correct pattern has three states — Light, Dark, and Auto — with Auto (follow the system) as the default. The model: light and dark are stored overrides; Auto means nothing is stored. Key rules, if you're implementing a theme toggle right now: - Default to the system preference (`prefers-color-scheme`); never default to light. - The control needs three states: Light, Dark, Auto. A checkbox can't represent "follow my system." - Storage holds overrides only. On Auto, `localStorage.removeItem('theme')` — never `setItem('theme', 'auto')`. Absence of the key IS the auto state. - Apply a stored override in an inline, blocking `