Zum Hauptinhalt springen
Leichte Sprache Gebärdensprache| KERN Katalog KERN Figma KERN openCode
Version: 2.8.2

Updatesicheres Theming

Du kannst das Design von KERN an dein Projekt anpassen, ohne den Quellcode von KERN zu verändern. Halte eigene Themes und Erweiterungen im Projekt getrennt von der Bibliothek. Bearbeite insbesondere keine Dateien unter node_modules: Sie werden bei einer Installation oder einem Update ersetzt.

1. KERN als Abhängigkeit einbinden​

Installiere das KERN Plain Kit, die HTML/CSS-Referenzimplementierung, über npm:

npm install @kern-ux/native

Lege daneben in deinem Projekt eine eigene Datei custom-theme.css an. Lade sie nach dem KERN-CSS, damit deine Überschreibungen Vorrang haben. In einem Projekt mit einem JavaScript-/TypeScript-Bundler sieht das beispielsweise so aus:

import '@kern-ux/native/dist/kern.min.css';
import '@kern-ux/native/dist/fonts/fira-sans.css';
import './custom-theme.css';

Alternativ kannst du eine eigene SCSS-Datei verwenden und das daraus kompilierte CSS nach KERN laden. Weitere Einbindungswege findest du unter Einbinden von KERN.

2. CSS-Variablen im eigenen Theme überschreiben​

KERN stellt seine Design-Token als CSS-Variablen bereit. Überschreibe nur die Token, die du ändern möchtest. Dieses Beispiel passt die Aktionsfarbe und die darauf verwendete Textfarbe für eine Anwendung im hellen Modus an. Setze dafür data-kern-theme="light" auf das <html>-Element:

custom-theme.css
:root {
  --kern-color-action-default: #005a70;
  --kern-color-action-on-default: #ffffff;
}

Komponenten wie der primäre Button verwenden diese Token und übernehmen die neuen Farben, ohne dass du ihre CSS-Regeln kopieren musst.

Das Beispiel gilt für den hellen Modus auf Dokumentebene. Für den Light- und Dark-Modus brauchst du jeweils passende Farbwerte; berücksichtige bei automatischer Umschaltung auch prefers-color-scheme. Wird ein Theme auf einem untergeordneten Element gesetzt, überschreibe die Token dort ebenfalls, etwa mit [data-kern-theme="light"] oder [data-kern-theme="dark"] in deiner Theme-Datei. Lokal gesetzte Werte haben Vorrang vor geerbten Werten aus :root. Prüfe Farbkontraste, Fokusdarstellung sowie Hover-, Aktiv- und Deaktiviert-Zustände.

3. KERN unabhängig vom Theme aktualisieren​

Aktualisiere das Paket wie jede andere Projektabhängigkeit, zum Beispiel innerhalb des in deiner package.json festgelegten Versionsbereichs:

npm update @kern-ux/native

Deine custom-theme.css bleibt dabei unberührt und wird weiterhin nach dem neuen KERN-CSS geladen. Solange die verwendeten Token kompatibel bleiben, wirkt dein Theme automatisch auch auf die aktualisierten Komponenten. Prüfe vor einem Versionswechsel die Release-Hinweise auf Änderungen an Token, Klassen oder Markup und kontrolliere danach Darstellung und Bedienbarkeit. Die Trennung schützt deine Anpassungen vor dem Überschreiben, ersetzt aber keine Prüfung auf inkompatible Änderungen.

Inhaltsverzeichnis