# Colours, fonts and CSS

> The theme holds your colours and fonts by name, every stylesheet reads them as CSS variables, and there is no hidden stylesheet underneath.
>
> From the MightyBuilder documentation: https://docs.mightybuilder.ai/design/theme

Everything shared between pages lives in one place, so a change lands on all of
them at once. The colours and fonts are the **theme**; the stylesheet and
scripts are in **Settings**.

## The theme

**Theme** is a row of its own in the rail, just above **Settings**. It holds two
lists — **Colors** and **Fonts** — and every site starts with each entry named
for the **role** it plays rather than for what it looks like:

| Colours | Fonts |
| --- | --- |
| `color-background`, `color-surface`, `color-text`, `color-muted`, `color-border`, `color-primary`, `color-primary-contrast`, `color-accent` | `font-body`, `font-heading` |

So a name says where it belongs — `color-primary` is the colour of the main
button, whatever colour that happens to be this year — and changing its value
changes everything that uses it.

A colour is picked with a colour picker, or typed in any form CSS accepts. A
font is a typeface, from the system's own or a web font, with the weights the
site uses — and only those weights are downloaded.

## How a stylesheet reads them

Every entry is also a CSS variable: `--mb-` and then exactly its name.

```css
body {
  background: var(--mb-color-background);
  color: var(--mb-color-text);
  font-family: var(--mb-font-body);
}
.button {
  background: var(--mb-color-primary);
  color: var(--mb-color-primary-contrast);
}
```

That is the whole mechanism. Nothing applies a font by itself: a font is in use
where the stylesheet names it, which is why a new site's stylesheet already
reads `font-body` and `font-heading`.

## Adding a colour

Need a colour the theme does not have — a darker shade of the primary for text
on a light background, say? Add an entry for that role rather than typing a hex
value into a stylesheet:

> Add a darker shade of our primary colour for headings, and use it.

A value typed straight into the CSS is one nobody finds the day the brand
changes.

## Settings: CSS and JS

**Settings → CSS** is the site-wide stylesheet — the rules every page gets.

**Settings → JS** is site-wide JavaScript, for the rare page that needs it.

## There is no hidden stylesheet

**Every rule your pages get is one you can read.** There is no platform CSS
underneath doing things you cannot see or override.

That matters when you ask for a change. "Make the headings smaller" works
because the heading rule is in your stylesheet, in front of both of you — rather
than buried in something neither of you can edit.

A new site starts with a short stylesheet written for it, which reads the
theme's fonts. It is yours: edit it, replace it, delete it.

## Asking for changes

This is the usual way to change any of it:

> Make the body text a bit larger and give the buttons more breathing room.

The AI edits the site CSS, which lands on every page. Ask for something on one
page only and it writes that page's own CSS instead. Ask for a new colour scheme
and it changes the theme's colours.

## Renaming an entry

A stylesheet refers to an entry by its name, so renaming one means changing the
stylesheet too — ask the AI and it does both in one go. Changing an entry's
*value* is always safe; that is what it is for.