Color schemes (light and dark)

Last reviewed Jun 1, 2026 Content v20260601

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Color schemes (light and dark)—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 Color schemes (light and dark) 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.

Toward the end of the track—use it to consolidate patterns before the capstone or summary lessons.

Pico 2 ships light and dark palettes driven by CSS variables. By default, light is the baseline; dark can follow prefers-color-scheme: dark or explicit data-theme="dark" on html (or a subtree).

Scoping themes

Set data-theme on html for the whole document, or on a section / article when one card should stay light inside a dark page. Elements like button, input, table, and dialog read scheme variables automatically; bare section wrappers may need background-color: var(--pico-background-color) if you want an explicit surface.

Theme colors

When compiling from Sass, $theme-color picks a primary accent from Pico’s palette (azure, purple, jade, etc.). CDN users can still tune --pico-primary and related variables in a small custom stylesheet.

Self-check

Which attribute forces dark mode regardless of OS preference?
Why might a nested article use its own data-theme?

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

data-theme tested?
System vs manual dark?

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