Zum Inhalt springen
NativeCSS

Farben live anpassen

Setzt jede Basisfarbe direkt als CSS Custom Property auf <html> - alle abgeleiteten Stufen (100/300/700/900, Badges, Buttons, Cards ...) ziehen automatisch mit, weil sie per color-mix() aus genau diesen Werten berechnet werden. Light und Dark bleiben dabei GETRENNT pflegbar (echtes light-dark()-Paar, kein fester Wert) - unten umschalten, welche der beiden Varianten die Regler gerade zeigen/bearbeiten. Theme-/Palette-Button bleiben klickbar, wirken sich auf die hier geänderten Farben aber nicht mehr aus, bis "Zurücksetzen" gedrückt wird.

--ncss-color-overlay bleibt bewusst ohne Regler - ein transparenter rgb(0 0 0 / 45%)-Wert, <input type="color"> kann keine Transparenz abbilden und würde die Deckkraft beim Übernehmen stillschweigend auf 100% setzen.

Farben

Alle Farb-Tokens aus einer Basisfarbe pro Familie berechnet (color-mix() in oklch, siehe colors.css) - Theme-Button oben rechts nutzen, um jede Fläche in Light/Dark zu vergleichen.

<span class="ncss-badge">Standard</span>
<span class="ncss-badge ncss-badge--success">Erfolg</span>
<span class="ncss-badge ncss-badge--danger">Fehler</span>

<button class="ncss-btn ncss-btn--primary">Primär</button>

Semantische Tokens

brand
brand-2
bg
bg-subtle
surface
text
text-muted
border
focus-ring
overlay

Abgestufte Skalen (100-900)

500 = Basisfarbe. 100/300 und 700/900 sind jeweils light-dark()-gewrappt - im Dark Mode mischen 100/300 gegen Schwarz statt Weiß, damit sie dezent bleiben statt zu grell zu wirken.

brand

100
300
500
700
900

brand-2

100
300
500
700
900

neutral

100
300
500
700
900

success

100
300
500
700
900

warning

100
300
500
700
900

danger

100
300
500
700
900

Cards in verschiedenen Farben

.ncss-card--brand/-brand-2/-neutral/-success/-warning/-danger - 100-Fläche + -on-soft-Text (dieselbe Paarung wie bei Badges), plus farbiger Rand als Akzent. Genau dieses Muster ist auch die Hinweis-/Callout-/"Note"-Box für Dokumentationstexte (Tipp/Warnung/Fehler) - keine eigene Callout-Komponente nötig, dieselben Klassen reichen.

Brand

Standard-Markenfarbe für allgemeine Hinweise.

Brand-2

Zweitfarbe für Akzente/Kampagnen.

Neutral

Neutrale Info ohne Wertung.

Success

Erfolgreich gespeichert/abgeschlossen.

Warning

Achtung, noch nicht veröffentlicht.

Danger

Fehler, Aktion erforderlich.

Badges

Brand Brand-2 Neutral Success Warning Danger

Buttons

Vollflächige Marken-Farbe

.ncss-surface--brand/-brand-2/-neutral (helpers/surfaces.css) - nutzt die 900-Stufe als Hintergrund, feste weiße Textfarbe (bewusst nicht die theme-abhängige Kontrastfarbe, siehe Kommentar in surfaces.css).

Brand-Fläche
Brand-2-Fläche
Neutral-Fläche

Verläufe (linear-gradient)

Winkel per --ncss-gradient-angle parametrisierbar (Default 135deg), pro Instanz überschreibbar: style="--ncss-gradient-angle: 90deg".

.ncss-gradient-brand
.ncss-gradient-subtle
--ncss-gradient-angle: 90deg

Verlauf als Textfarbe

.ncss-text-gradient-brand - nur für große, auffällige Überschriften gedacht, nicht für Fließtext.

Hell/Dunkel-Umschalter

js/theme-toggle.js + components/theme-toggle.css setzen [data-theme] am <html> (wirkt über light-dark() in colors.css) und merken sich die Wahl. js/theme-toggle-early.js synchron im <head> verhindert das Aufblitzen des falschen Modus beim Laden. Zwei Varianten - beide hier aktiv, sie schalten denselben Zustand:

Icon-Button: Hell ↔ Dunkel Zyklus: System → Hell → Dunkel 
<head>
  <script src="dist/js/theme-toggle-early.js"></script>   <!-- synchron, vor dem CSS -->
  <link rel="stylesheet" href="dist/ncss.css">
  <script src="dist/js/theme-toggle.js" defer></script>
</head>

<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>

<button type="button" data-ncss-theme-toggle="cycle">Theme: <span data-ncss-theme-label>System</span></button>