Light and dark

A theme covers both canvases from one file. There is no second palette to maintain and no duplicated list of colors. The whole mechanism is one CSS function.

light-dark()

Write each color as a pair — the light value first, the dark value second:

--bg:          light-dark(#FBFCFE, #0C1119);
--text-body:   light-dark(#1C2A3E, #D2DCEA);
--accent:      light-dark(#2E5C8A, #7FB2E5);

The browser picks a side based on the canvas the slide is currently painting, at every place the color is used. Nothing in the engine intervenes: no plugin, no class switching, no second stylesheet. It is the browser’s own mechanism, which is why it behaves identically in the command-line renderer, the Studio, and the editor preview.

One file, two canvases

ResetDark

Try this. Press Dark. Every color moves to the second half of its pair — and the file did not change. Then edit a dark value and press Dark again to see it land.

The dark variant file

This is why evergreen-dark.css does its whole job in three declarations (the generated file wraps them in a header comment):

/* @theme evergreen-dark */
@import 'evergreen';
:root { color-scheme: dark; }

It imports the palette you already wrote and flips one switch. Every light-dark() pair resolves to its second value, and you are done.

How a deck picks a canvas

color-mode: is how an author picks a canvas. Know the values, so your theme is tested the way people will use it — three of the five can land a reader on your dark half.

What the author wants	What they write
The whole deck dark	color-mode: dark
The whole deck light	color-mode: light
Follow the reader’s system setting	color-mode: system
Adopt the surrounding page’s mode	color-mode: inherited
Ink on white, for paper	color-mode: print

Two more routes exist outside that key. <!-- _class: dark --> on a single slide makes just that slide dark in a light deck. And picking theme: evergreen-dark swaps the palette itself — the variant pins color-scheme: dark at the root, where color-mode: dark marks each slide, so reach for color-mode: unless you specifically want the swap.

The default is light.

Getting the dark side right

A dark canvas is not an inverted light one. Pure white text on pure black is harsh at projector brightness. Pull both ends in: a near-black page, an off-white ink.

Accents usually have to get lighter. A deep navy that sings on white disappears on near-black. The dark half of --accent is often a noticeably paler version of the same hue, not the same value.

--on-accent has to work on both. It is the text placed on the accent fill, and since the accent itself flipped, the ink over it probably has to flip as well.

A theme with no dark half

ResetLight

Try this. This theme writes flat colors instead of pairs, so it has nothing to switch to. The canvas here is set to dark and the slide is still light — press Light and back and nothing moves at all. A theme without pairs has exactly one canvas, whatever the deck asks for.

Next

The hardest colors in any theme use those pairs the most, and they swap sides when the canvas does: Colors for charts and diagrams.