# Colours
> Give the site your palette — one token in the configuration, the dark scheme in a file of your own.
Lesson 1 of 3.
A component here never writes a colour. It asks for a token, 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:
```js
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.
`tokens` sets the **light** palette. If your configuration carries `darkMode: 'dark'`, the reader
never sees it — the dark values come from the theme's own stylesheet. The next section is then the
one that matters.
## 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:
Create `theme/10-dark.css`. Dark comes in two ways — the reader's system, and
the class a configuration sets — so both are written:
```css
@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
In light
Your accent on links, gauges, the current menu entry and the focus ring.
In dark
The same, in the values of your `theme/` file — and the rest of the palette too.
## 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.
```mdx
```
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:
```mdx
A line of your own
```
Under the `custom` theme, a one-off colour is a class of the `theme/` folder,
written on the tokens so that it follows the palette:
```css
/* theme/99-mine.css */
.mine {
color: var(--dp-accent);
}
```
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
You set `--dp-accent` in the configuration and nothing changed. Why?
Either the site is held dark — `darkMode: 'dark'` — and the dark palette
answers instead, or the token was written outside the `tokens` object. The
build would have said nothing in both cases: the stylesheet compiles either
way.
Where do you put a class of your own, used in a page with `className`?
In a `.css` file of the `theme/` folder. It is appended after the component
rules, so it wins — and under the `custom` theme, it is the only place those
classes exist at all.
The full picture: slots, layer order, and why the stylesheet is compiled last.