Theme anpassen

Eine Datei für alle wichtigen Werte - theme.css. Nach ncss.css laden, direkt die Werte darin überschreiben, keine andere Datei anfassen.

Einbinden

<link rel="stylesheet" href="ncss.css">
<link rel="stylesheet" href="theme.css">

Funktioniert ohne @layer/!important: theme.css ist bewusst UNLAYERED, und unlayered CSS gewinnt in der Spec immer gegen jede Layer-Regel (siehe Architektur) - ein einfaches :root { --ncss-color-brand: ... } reicht.

Nur Seed-Werte, keine Ableitungen

theme.css enthält nur die BASIS-/SEED-Werte (Markenfarben, Grundflächen, Schriften, Radien, Schatten, Bewegung), nicht die daraus abgeleiteten Farbskalen. Farben wie --ncss-color-brand-100/-300/-700/-900 werden aus GENAU EINEM Basiswert per color-mix() automatisch berechnet - die Markenfarbe in theme.css ändern genügt, die ganze Skala (helle/dunkle Stufen, "on-soft"-Textfarbe, Web-Awesome-Bridge) zieht automatisch mit.

Wichtige Einschränkung

Nur auf :root angewendet funktioniert die automatische Ableitung. Wird derselbe Seed-Wert stattdessen NUR lokal auf ein einzelnes Element überschrieben, ziehen nur Regeln mit, die den Seed direkt referenzieren - die abgeleitete Skala bleibt beim alten Wert, weil sie nur einmal auf :root berechnet und als fertiger Wert vererbt wird.

Mehrere Themes parallel

Denselben Aufbau in einer weiteren Datei wiederholen (z.B. theme-sunset.css) und je nach Bedarf statt theme.css laden - oder die [data-palette]-Konvention in colors.css nutzen für einen rein attributgesteuerten Wechsel ganz ohne zweite Datei: <html data-palette="sunset">.

Seitenübergänge (opt-in)

Weiche Übergänge zwischen Seiten-Navigationen - eigene, ebenfalls opt-in Datei: page-transitions.css.

<link rel="stylesheet" href="ncss.css">
<link rel="stylesheet" href="page-transitions.css">

Reines CSS (@view-transition { navigation: auto; }), kein JavaScript nötig. Aktuell nicht Baseline (Chromium-Familie) - keine Auswirkung auf ältere Browser, eine unbekannte @-Regel wird beim Parsen einfach ignoriert, kein @supports nötig. Vier Presets liegen bei: Kreuzblende (Default), slide, zoom, wipe - aktivierbar über den types-Deskriptor.

Bekannte Konsolen-Meldung in manchen Browsern (kein ncss-Bug, aktuell v.a. WebKit/Safari bei Zurück-/Vorwärts-Navigation während eine Transition läuft): "AbortError: Skipping view transition because skipTransition() was called" - spec-bedingt erwartet, die Navigation funktioniert trotzdem normal weiter. Optionaler Begleiter, der nur diese Konsolen-Meldung unterdrückt: <script src="js/page-transitions-quiet.js" defer></script>.