Colours

A palette sets every colour: the ground, the text, secondary text and lines, an accent for focus, selection, the current place and links, and the green, yellow and red of asides and changed lines. It comes in a dark and a light scheme, with code themes to match.

Try a palette

Pick one. The whole site changes, its code included, for this visit, and the line below is the option that gives it.

hyphacatppuccinrose-pinegruvboxeverforestkanagawasolarizedgithubnight-owlvitesse

The theme's own, turned

Hue

Accent

Tint

Reset

Known palettes

Nine palettes people already know from their editors, adopted with their own code themes:

starlightThemeHypha({ palette: "catppuccin" });

Palette	Dark	Light
catppuccin	catppuccin-mocha	catppuccin-latte
rose-pine	rose-pine	rose-pine-dawn
gruvbox	gruvbox-dark-medium	gruvbox-light-medium
everforest	everforest-dark	everforest-light
kanagawa	kanagawa-wave	kanagawa-lotus
solarized	solarized-dark	solarized-light
github	github-dark	github-light
night-owl	night-owl	night-owl-light
vitesse	vitesse-dark	vitesse-light

Each keeps its published colours where they read. Where one falls short of the theme’s bar for body text, often a light scheme’s text or yellow, only its lightness moves, as far as it must; its hue and chroma stay.

The theme’s own

hypha, the default, is the theme’s own palette, turned by three numbers: a hue for the near-greys of the ground, text and lines, an accent hue, and a tint, how much colour the greys carry, from 0, grey, to 2. A hue given alone brings its accent with it, six degrees on:

starlightThemeHypha({ hue: 30 }); // accent 36
starlightThemeHypha({ hue: 160, accent: 20, tint: 1.5 });

The numbers turn the theme’s own palette alone; a known palette has its own colours, and the plugin refuses them beside one.

Light and dark

scheme is the scheme a visit starts in: auto, the default, follows the visitor’s system, or dark or light. The header’s control lets the visitor change it, and their choice is kept for the next visit; a site’s default is never stored, so changing it reaches everyone.

starlightThemeHypha({ scheme: "dark" }); // starts dark, the control can change it
starlightThemeHypha({ themeSelect: false }); // follows the system, no control
starlightThemeHypha({ scheme: "dark", themeSelect: false }); // always dark

Without the control, a choice stored on an earlier visit is ignored. Code is coloured for each scheme the site can show, and the browser’s theme-color follows the starting scheme.

Your own colours

To change a role rather than a palette, set its token. A token on :root changes both schemes; under [data-theme], one:

src/styles/custom.css

:root[data-theme="light"] {
  --hypha-color-ivory: #fffdf8;
}

The roles and their defaults are under Tokens.