How to use a palette
The whole theme is drawn with six color tokens. Applying a palette means changing those six values in one file; nothing else needs editing.
Apply it in theme.css
- Open
src/styles/theme.css. Its:rootblock holds--primary,--secondary,--tertiary,--text,--backgroundand--paragraph. - Pick a palette and replace each token's value with the color of the same name. Click a swatch to copy its hex.
- Save. The dev server repaints at once; the next build bakes the new colors into the stylesheet.
/* Verdigris + Monochromatic */
:root {
--primary: #3aa39f;
--secondary: #002a2c;
--tertiary: #edf3f3;
--text: #292f36;
--background: #e6eeef;
--paragraph: #4b5563;
}A few colors are written as plain values in src/styles/components.css rather than as tokens (the shop sidebar's hover underline, the text in the newsletter and form fields). Search that file for the old hex to change them too, and set themeColor in src/config/site.ts to tint the browser bar.
UI Color Combinations
Neutral + Earth
Primary
Secondary
Tertiary
Text
Background
Paragraph

Verdigris + Monochromatic
Primary
Secondary
Tertiary
Text
Background
Paragraph

Smoky + Haiti
Primary
Secondary
Tertiary
Text
Background
Paragraph

Bitter + Dark Green
Primary
Secondary
Tertiary
Text
Background
Paragraph

Shade + Fluorescent
Primary
Secondary
Tertiary
Text
Background
Paragraph
