Themes
Themes
Three looks over one set of components, each with a day and a night: Glass (frosted, black glass by night), Soft (neutral grey, solid — the one for every screen, good or cheap) and Plain (flat white and grey; graphite by night). A theme only changes the surfaces, ink and accents — cards, buttons, chart colours, spacing and motion stay the same, so meaning never moves.
Side by side
The same components in every theme, by day and by night. Press one to use it on the whole site; Day or night also lives in the gear menu, where Auto follows the device.
Accent colours
On top of any theme, an accent colours the main buttons, the selected nav item, dark switchers, ticks, links and focus. Charts keep their colours — blue is always income, orange always expense. Every accent keeps white button text readable.
What a theme can change
These tokens, and only these. Everything else is shared.
| Surfaces | --canvas --panel --card --card-flat --surface --pop --sheet |
| Ink | --ink --ink-2 --muted --faint --line |
| Accent | --blue --focus --pill --pill-ink --info-ink --info-bg |
| Status inks | --ok-ink --warn-ink --bad-ink (lighter on dark themes, same meaning) |
| Never | Chart colours, spacing, radii, type, motion |
Make your own
Pick a base, an accent and a tint; the preview is the real components. Copy or download the CSS and add it after the tokens.
/* Octagon OS theme "mine" — on top of Glass by day */
[data-theme='mine'] {
--canvas: radial-gradient(ellipse at 30% 0%, hsl(240 12% 93%) 0, transparent 55%), radial-gradient(ellipse at 90% 60%, hsl(240 9% 80%) 0, transparent 60%), hsl(240 7% 85%);
--panel: hsla(240 12% 92% / .74);
--card: linear-gradient(150deg, hsl(240 10% 95%), hsl(240 8% 91%) 70%);
--track: hsl(240 8% 80%);
--blue: #5d6ef0;
--blue-strong: #4a58c0;
--info-ink: #4956bb;
--info-bg: rgba(93, 110, 240, 0.14);
--focus: rgba(93, 110, 240, 0.55);
--pill: #1b1b1e;
--pill-ink: #ffffff;
}