website/css/themes.css

website/css/themes.css

the website's source · 174 lines · read it on GitHub

WHAT IT DOES

Colour schemes. Every theme defines the same eleven tokens, so the rest of the stylesheet never names a colour directly and adding a theme is a matter of adding one block here.

Tokyo Night is the default and is declared on :root so the page has correct colours before any JavaScript runs, including for readers who block it entirely. The others are opt-in via [data-theme] on <html>.

Each block also declares color-scheme, beside the colours it has to agree with. That is the one thing CSS custom properties cannot reach: the browser's native controls -- the theme <select>'s dropdown list, the verifier's <progress> bar, the file picker -- are drawn by the platform, and without this they are drawn light on a near-black page. Keeping it in the same block as the palette means a new theme cannot be added with the wrong one.

IN PLAIN WORDS

This is the list of colour schemes -- nine of them, twelve colours each.

Everything else on the site refers to colours by their job rather than by name: "the background", "a warning", "secondary text". That is why adding a whole new scheme means adding a block here and changing nothing else, and why the desktop application can offer exactly the same nine.

THE SECTIONS IT IS MADE OF

SectionLine