Farben & Flächen
light-dark() ist die alleinige Dark-Mode-Mechanik - kein zweites Dark-Stylesheet, keine .dark-Klasse. EIN Wert pro Token deckt Hell und Dunkel ab.
Semantische Tokens
| Token | Zweck |
|---|---|
--ncss-color-brand / -brand-2 | Marken-/Zweitfarbe |
--ncss-color-neutral | Basis-Grauton |
--ncss-color-success / -warning / -danger | Statusfarben |
--ncss-color-bg / -bg-subtle | Seitenhintergrund, dezent abgesetzt |
--ncss-color-surface | Karten/Panels |
--ncss-color-text / -text-muted | Fließtext, gedämpfter Text |
--ncss-color-border | Rahmen |
--ncss-color-focus-ring | Fokus-Ring |
--ncss-color-overlay | Modal-/Dialog-Backdrop (transparent) |
Abgestufte Skalen
Jede der sechs Farbfamilien (brand, brand-2, neutral, success, warning, danger) hat abgeleitete Stufen, per color-mix() aus GENAU EINEM Basiswert berechnet:
| Suffix | Bedeutung |
|---|---|
-100 / -300 | Heller/dezenter (Badge-/Chip-Hintergrund) |
-500 | Die Basisfarbe selbst (Alias) |
-700 / -900 | Dunkler/kräftiger, bleibt in BEIDEN Modi dunkel |
-on-soft | Passende Textfarbe für eine -100/-300-Fläche |
Eine Marke in theme.css ändern, die ganze Skala zieht automatisch mit - siehe Theme anpassen.
Farbige Flächen
helpers/surfaces.css: .ncss-surface--brand / --brand-2 / --neutral - Hintergrund + garantiert passende Textfarbe (900er-Stufe + #fff) in einer Klasse, statt Inline-Style mit hand-gepflegtem Kontrast.
<div class="ncss-surface--brand">Immer lesbarer Kontrast</div>Web Awesome auf farbigen Flächen: ein <wa-input> o.ä. rendert Label/Wert im eigenen Shadow DOM - color allein erreicht das nicht. webawesome-bridge.css bridgt --wa-form-control-label-color u.a. automatisch mit, sobald .ncss-surface--* oder .ncss-text-light/-dark im Spiel sind.
Erzwungener heller/dunkler Text
.ncss-text-light/-dark (+ -100/-300/-700/-900 als Deckkraft-Stufen) - fest auf Weiß/Schwarz, UNABHÄNGIG vom Theme. Für Flächen, deren Farbe nicht über ncss-Tokens läuft (Foto, Video-Poster). UIkit-uk-light-Pendant.
Manueller Theme-Override
[data-theme="light"]/[data-theme="dark"] auf <html> erzwingt ein Farbschema unabhängig von der Systemeinstellung (z.B. für einen UI-Umschalter). Lokal auf ein einzelnes Element: .ncss-scheme-dark/-light (helpers/surfaces.css).
Umschalter mit gespeicherter Wahl (opt-in)
js/theme-toggle.js + components/theme-toggle.css machen daraus einen fertigen Umschalter: die Wahl bleibt in localStorage („ncss-theme“) gespeichert, ohne Wahl gilt das System (auch live, wenn es sich ändert). js/theme-toggle-early.js - synchron im <head> VOR dem CSS - setzt die Wahl, bevor die Seite gezeichnet wird, damit nichts aufblitzt; als eigene Datei statt Inline-Snippet, damit eine strenge CSP ohne 'unsafe-inline' funktioniert. Beide setzen zusätzlich [data-theme-resolved] = den tatsächlich aktiven Modus (auch bei „System“), z.B. für das passende Icon.
<script src="dist/js/theme-toggle-early.js"></script>
<link rel="stylesheet" href="dist/ncss.css">
<script src="dist/js/theme-toggle.js" defer></script>
<!-- Icon-Button: Hell <-> Dunkel -->
<button type="button" class="ncss-theme-toggle" data-ncss-theme-toggle>
<span class="ncss-icon ncss-icon-moon ncss-theme-icon-dark" aria-hidden="true"></span>
<span class="ncss-icon ncss-icon-sun ncss-theme-icon-light" aria-hidden="true"></span>
</button>
<!-- Zyklus: System -> Hell -> Dunkel -->
<button type="button" data-ncss-theme-toggle="cycle">Theme: <span data-ncss-theme-label>System</span></button>Der Icon-Button bekommt aria-pressed und ein wechselndes aria-label („Dunkles Design einschalten“/„Helles Design einschalten“, Englisch nach <html lang>, überschreibbar per data-label-dark/-light). Entspricht die neue Wahl wieder dem System, wird die gespeicherte Wahl gelöscht. Der Farbwechsel blendet nur während des Umschaltens weich über (.ncss-theme-switching, abgeschaltet bei prefers-reduced-motion). Live: Demo.