Developer
Sign in

Unify

Theming

Every app is the same system in its own colour. Pick a hue — the whole page re-themes as you drag — and copy the CSS into the app's globals.css.

Contrast (light) AAText on tint 5.13:1Ink on fill 5.74:1
Theme
Your appAccent #00736a · #4dc0b3
AccentLiveBetaDownNeutral

Body text with a link and selected text.

Info uses the accent

Tints, focus rings, selection and links all follow the hue.
Your CSS
/* app/globals.css */
@import "@nashyvan/unify/styles.css";

:root {
  --accent-h: 185;
  --accent-c: 0.12;
  --accent-l-light: 0.5;
  --accent-l-dark: 0.74;
  --tone: 0.004;
}

/* ≈ #00736a light · #4dc0b3 dark */

The knobs

All derived colours (tints, rings, selection, glows, the info status) follow from these. Nothing else is themeable, on purpose.

VariableDefaultWhat it does
--accent-h258Accent hue, 0–360. Coready blue by default.
--accent-c0.214Accent chroma (vividness). The dark theme uses 88% of it.
--accent-l-light / -dark0.54 / 0.658Accent lightness per theme. Light: the largest value that keeps accent text AA on its tint.
--accent-ink-light / -darkwhite / near-blackText on a filled accent. White passes for every preset in light mode.
--tone0Chroma mixed into every grey (0–0.012), toward --tone-h (the accent hue).
data-accent—A preset on <html>: blue, sky, indigo, violet, pink, orange, amber, green, teal, graphite.
data-theme—Force light or dark; absent = follow the OS. Set by <ThemeScript>.