Dark mode toggle

Last reviewed Jun 1, 2026 Content v20260601

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

advanced

This lesson

This lesson teaches Dark mode toggle—the ideas, syntax, and habits you need before moving on in Pico CSS.

Class-light frameworks teach when semantic HTML alone should carry the design.

You will apply Dark mode toggle in contexts like: Documentation sites, blogs, internal tools, and side projects where you want polish without a large class vocabulary.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When intermediate lessons feel comfortable and you are ready for production-style trade-offs.

Respect prefers-color-scheme for the first paint, then let users override with a toggle that sets data-theme="light" or data-theme="dark" on document.documentElement. Persist the choice in localStorage so return visits stay consistent.

Avoid flash of wrong theme

Inline a tiny script in <head> (before CSS) that reads storage and sets data-theme immediately—same pattern as Bootstrap color modes and modern docs sites.

Pico does not ship a toggle

You own the button and storage; Pico supplies the variables that react to data-theme. Keep the control a real button with an accessible name (“Toggle dark mode”).

Self-check

Which DOM node should carry data-theme for a global switch?
Why read localStorage before the first render?

Interview prep

How does Pico handle dark mode?: Set data-theme="light|dark" on html or respect prefers-color-scheme depending on your setup.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

Toggle implementation?
Respect prefers-color-scheme?

No discussion yet. Be the first to ask a question.