Theming

Zwei Themes, ein Token-Satz

Alle Farben kommen aus --nk-*-Tokens. Das helle Theme liegt auf :root, das dunkle auf [data-theme="dark"]. Der Theme-Toggle im Header setzt das Attribut und merkt sich die Wahl im Browser.

Ohne JavaScript folgt die Seite der System-Präferenz: Ein generierter Spiegel des Dark-Blocks greift per prefers-color-scheme.

Marke setzen

Die eine Zeile, die alles umfärbt:

:root { --nk-accent: #2f8f5b; }
[data-theme="dark"] { --nk-accent: #5cbf87; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --nk-accent: #5cbf87; }
}

Der dritte Block ist der No-JS-Pfad. Vergisst man ihn, bleibt die Marke ohne JavaScript bei dunkler OS-Präferenz auf dem Foundation-Blau.

Farbrollen: Tag, Tint, Colour

Jede der neun Farbtöne (gray, brown, orange, yellow, green, blue, purple, pink, red) kommt in drei Rollen:

Token	Rolle	Beispiel
--nk-tint-<farbe>	weiche Fläche	Hinweis-Banner, Highlight-Pill, Fortschrittsbalken
--nk-color-<farbe>	farbiger Text und Marken	Code-Tokens, Deltas, „Kopiert”-Zustand
--nk-tag-<farbe>-bg / -text	Paar eines .nk-tag	Status-Chips in Tabellen

Die Tag-Tokens gehören zusammen: Der Tag-Text ist fast schwarz auf satter Fläche und taugt nicht als Textfarbe. Wer eine Fläche tönen oder einen Text färben will, nimmt Tint oder Colour.

Was ihr nicht tun solltet

• Farbwerte direkt in Komponenten schreiben – der Guard npm run check:colors schlägt an.
• Tokens auf einem Teilbaum setzen – Custom Properties werden dort ersetzt, wo sie deklariert sind, und erreichen die :root-Tokens nicht.
• notionkit.css kopieren oder editieren – Updates sind ein Versions-Bump.

Serif-Headlines

Wer den Look von twenty.com mag: --nkw-font-display in brand.css auf einen Serif-Stack setzen. Fließtext bleibt System-Sans.