Colours

A component here never writes a colour. It asks for a tokenA CSS variable named --dp-something, defined once and read by every component., and the theme answers — which is why one line changes the whole site, including the parts you have not written yet.

Your turn

Open docpensieve.config.mjs and give the accent a colour of your own:

theme: {
  framework: 'tailwind',
  tokens: {
    '--dp-accent': '#7c5cff',
    '--dp-radius': '0.75rem',
  },
},

Rebuild, and look at a link, a gauge, the current entry of the menu, the border of a card you never touched. All of them moved.

The dark scheme

The dark palette is a second set of values for the same tokens. It is redefined in the theme/ folder, at the root of the project — every .css file there is read in name order and appended last, which makes it the project's final word:

• my-course

  • docpensieve.config.mjs
  • theme

    • 10-dark.css — yours
    • 99-docpensieve.css — written by init, under the custom theme
  • docs

Create theme/10-dark.css. Dark comes in two ways — the reader's system, and the class a configuration sets — so both are written:

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --dp-accent: #a78bfa;
    --dp-bg: #0b0b14;
  }
}

:root.dark {
  --dp-accent: #a78bfa;
  --dp-bg: #0b0b14;
}

The header carries a button that switches between the two and remembers the choice. It is the only script a content page loads, and theme.toggle: false removes it.

What you should see

What follows the accent on its own

An icon inlined in the page takes the colour of the text around it, so it follows your palette without being told:

on the accent, on the quiet text.

<LogoIcon src="./icons/star.svg" size="1.5rem" style={{ color: 'var(--dp-accent)' }} />

The one thing that does not follow by itself is a class you write yourself, and its shape depends on the theme you chose in the first lesson of the course:

Under the tailwind theme, a one-off colour is a utility, written where it is used:

<div className="text-indigo-500">A line of your own</div>

This page is showing you the variant of the theme this very site runs — that is ForTheme, and it is how the whole documentation stays right under both.

Check yourself