Theme Library
Apply a color theme to the public site or admin dashboard in one click, create your own from six colors, and use theme variables in your own content.
The Theme Library sets the colors of your whole site in one click — and of the admin dashboard, separately. Every page, block and menu that uses theme colors follows along, so you never recolor pages one by one.
Apply a theme
- Go to Admin → Theme Library.
- Pick what you're styling with the tabs at the top: Public Site or Admin Dashboard. Each has its own active theme.
- Click Apply on a preset. The card gets an Active badge and the change is live straight away — no rebuild or restart.
The library ships with light presets such as Forest, Ocean, Slate and Clay, and dark ones such as Midnight, Sapphire, Ember and Charcoal.
Reset to default removes the active theme for that tab, and the site falls back to its built-in colors.
Create your own theme
Click New preset, give it a name and pick six colors:
| Color | Used for |
|---|---|
| Background | the page background |
| Surface | cards, panels and other raised areas |
| Text | headings and body text |
| Muted text | captions, dates and secondary text |
| Accent | links, buttons, highlights |
| Border | dividers and outlines |
Everything else is worked out for you: a hover shade of the accent, a second accent for gradients, a fainter text color and a stronger border.
Example — a calm "Harbor" theme:
| Color | Value |
|---|---|
| Background | #f5f8fb |
| Surface | #ffffff |
| Text | #12263a |
| Muted text | #5b6b7c |
| Accent | #0f766e |
| Border | #d9e2ec |
Create it, then click Apply on it like any built-in preset. Tip: keep Text and Background far apart in brightness so everything stays readable.
Fine-tune the generated file
Applying a theme writes a real CSS file — for example
theme-public-forest.css — which you'll find under Admin → CSS Files.
Open it to adjust any value by hand. Note that applying the same preset
again regenerates the file and replaces your edits.
To see exactly which colors are live, open Admin → Settings → Theme Variables.
Use theme colors in your own content
A theme is a set of CSS variables. Use them anywhere you write CSS — a page's head HTML, an HTML block, a custom CSS file — and your content follows whichever theme is active:
| Variable | Meaning |
|---|---|
--pub-bg | page background |
--pub-surface | cards and panels |
--pub-ink | main text |
--pub-ink-muted | secondary text |
--pub-ink-faint | faint text |
--pub-accent | accent |
--pub-accent-2 | second accent, for gradients |
--pub-accent-hover | accent on hover |
--pub-border | borders |
--pub-border-strong | stronger borders |
Example — a card:
<div class="promo-card">
<h3>Spring release</h3>
<p>New blocks, faster pages.</p>
<a href="/pricing">See pricing</a>
</div>
<style>
.promo-card {
background: var(--pub-surface);
color: var(--pub-ink);
border: 1px solid var(--pub-border);
border-radius: 12px;
padding: 1.5rem;
}
.promo-card p { color: var(--pub-ink-muted); }
.promo-card a { color: var(--pub-accent); }
.promo-card a:hover { color: var(--pub-accent-hover); }
</style>
Example — a gradient heading:
.hero-title {
background: linear-gradient(135deg, var(--pub-accent), var(--pub-accent-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
Switch themes and both examples recolor themselves. Avoid fixed colors like
#2563eb for anything that should match the site — they won't change with
the theme.
Many block settings (ambient backgrounds, gradient text and more) also let you pick a theme color instead of a fixed one, for the same reason.
Keep a page out of the theme
A page that brings its own complete design — for example an imported HTML site — can ignore the site theme. In Admin → Pages, switch off the Theme toggle for that page. Every other page keeps the active theme.