Theming

🧭 Konzepte

Hell, dunkel und eure Marke – alles über Tokens, nichts über Selektoren.

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.

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.