Theme anpassen

Wie es funktioniert

theme.css ist bewusst UNLAYERED (kein eigenes @layer) - und unlayered CSS gewinnt in der Spec immer gegen jede Layer-Regel aus ncss.css (Layer tokens), unabhängig von Selektor-Spezifität. Ein einfaches :root { --ncss-color-brand: ... } reicht, kein !important nötig.

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

Nur die BASIS-/SEED-Werte gehören dort hinein (Markenfarben, Grundflächen, Schriften, Radien, Schatten, Bewegung) - die daraus abgeleiteten Farbskalen (--ncss-color-brand-100/-300/-700/-900/-on-soft) werden per color-mix() aus GENAU EINEM Basiswert berechnet und ziehen automatisch mit.

Live-Beispiel

Dieser Kasten lädt zusätzlich theming-example.css - dieselbe Handvoll Seed-Werte wie eine echte theme.css, hier nur lokal auf diesen Bereich statt auf :root gesetzt (eine Theme-Datei kann genauso gut nur einen Seitenbereich statt der ganzen Seite umfärben). Button, Card-Rahmen/-Radius und Fokus-Ring reagieren automatisch, ohne eigene Regeln für dieses Theme.

Zwei Fallen, NUR bei lokaler Anwendung relevant (ein echtes theme.css auf :root betrifft beide NICHT):

• font-family ist eine vererbte Eigenschaft, .ncss-btn deklariert sie selbst nicht, sondern erbt den bereits fertig aufgelösten Wert von body weiter oben im Baum - --ncss-font-family-base hier nur als Custom Property zu setzen reicht deshalb nicht, font-family: var(--ncss-font-family-base) muss an dieser Stelle zusätzlich neu deklariert werden (Zeile unten). Dieselbe Falle wie bei .ncss-scheme-dark/-light, siehe helpers/surfaces.css.
• Die Badges unten bleiben ABSICHTLICH bei der Standardfarbe (blau/lila) - keine Fehldarstellung, sondern eine echte Grenze: .ncss-badge nutzt --ncss-color-brand-100/-on-soft (die per color-mix() ABGELEITETE Skala aus colors.css), und die wird nur EINMAL am :root berechnet, dann als fertiger Wert vererbt. Ein tiefer im Baum überschriebenes --ncss-color-brand lässt diese bereits berechnete, geerbte Ableitung NICHT neu rechnen - nur Regeln, die var(--ncss-color-brand) (den Seed selbst) direkt verwenden, wie .ncss-btn--primary, reagieren auf eine lokale Überschreibung. Ein echtes theme.css auf :root hat dieses Problem nicht: dort WIRD die ganze Skala frisch berechnet.

.theming-demo-panel {
  --ncss-color-brand: light-dark(#b45309, #fb923c);
  --ncss-color-brand-contrast: light-dark(#ffffff, #1a1204);
  --ncss-color-brand-2: light-dark(#166534, #4ade80);
  --ncss-color-brand-2-contrast: light-dark(#ffffff, #06210f);
  --ncss-color-focus-ring: light-dark(#b45309, #fb923c);
  --ncss-radius-sm: 0.1rem;
  --ncss-radius-md: 0.2rem;
  --ncss-radius-lg: 0.3rem;
  --ncss-font-family-base: Georgia, "Times New Roman", serif;

  /* nur bei lokaler Anwendung nötig, siehe Text oben */
  font-family: var(--ncss-font-family-base);
}

Mehrere Themes

Denselben Aufbau in einer weiteren Datei wiederholen (z.B. theme-sunset.css) und je nach Projekt/Domain 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">, siehe Farben-Demo.