### Install KERN-UX Native Package via NPM
Source: https://www.kern-ux.de/design-system/erste-schritte/entwicklerinnen/einbinden-von-kern
Installiert das KERN-UX Native Package mit npm. Dies ist die empfohlene Methode für die Integration in moderne Webanwendungen, die npm als Paketmanager verwenden. Nach der Installation können die CSS-Dateien direkt in die Anwendung importiert werden.
```bash
npm install @kern-ux/native --save
```
--------------------------------
### Import KERN-UX CSS via NPM
Source: https://www.kern-ux.de/design-system/erste-schritte/entwicklerinnen/einbinden-von-kern
Importiert die notwendigen KERN-UX CSS-Dateien in Ihre Anwendung nach der Installation über npm. Dies stellt sicher, dass das Design-System korrekt angewendet wird. Es werden sowohl die Haupt-CSS-Datei als auch die Schriftart-CSS-Datei importiert.
```css
@import "@kern-ux/native/dist/kern.min.css";
@import "@kern-ux/native/dist/fonts/fira-sans.css";
```
--------------------------------
### HTML Attributes for Manual Theme Setting
Source: https://www.kern-ux.de/design-system/erste-schritte/entwicklerinnen/light-dark-modus
These HTML examples demonstrate how to manually set the theme for specific elements or the entire webpage using the `data-kern-theme` attribute. This allows overriding browser preferences or setting a default theme. It requires no JavaScript and directly manipulates the DOM.
```html
Standardmodus (nutzt die Voreinstellung des Nutzers oder den Standardwert).
Dieser Bereich bleibt im Dunkelmodus.
```
```html
```
--------------------------------
### Include KERN-UX CSS via jsdelivr CDN
Source: https://www.kern-ux.de/design-system/erste-schritte/entwicklerinnen/einbinden-von-kern
Bindet die KERN-UX CSS-Dateien über das jsdelivr CDN in den Head-Bereich Ihrer HTML-Datei ein. Dies ist eine einfache Methode, um das Design-System zu nutzen, ohne es lokal installieren zu müssen. Es werden die Haupt-CSS-Datei und die Schriftart-CSS-Datei geladen.
```html
```
--------------------------------
### OKLCH-Farbvariablen definieren (CSS)
Source: https://www.kern-ux.de/design-system/foundations/farbe
Definieren Sie die L-, C- und H-Werte als einzelne CSS-Variablen, um eine modulare und systematische Farbsteuerung zu ermöglichen. Diese Variablen können später für dynamische Farbmanipulationen verwendet werden.
```css
--brand-color-l: 0.65;
--brand-color-c: 0.15;
--brand-color-h: 250;
```
--------------------------------
### Include KERN-UX CSS via unpkg CDN
Source: https://www.kern-ux.de/design-system/erste-schritte/entwicklerinnen/einbinden-von-kern
Bindet die KERN-UX CSS-Dateien über das unpkg CDN in den Head-Bereich Ihrer HTML-Datei ein. Ähnlich wie bei jsdelivr, ermöglicht dies die schnelle Einbindung des Design-Systems. Es werden die Haupt-CSS-Datei und die Schriftart-CSS-Datei geladen.
```html
```
--------------------------------
### Farbe aufhellen oder abdunkeln mit OKLCH (CSS)
Source: https://www.kern-ux.de/design-system/foundations/farbe
Erzeugen Sie hellere oder dunklere Varianten einer Farbe, indem Sie den L-Wert (Lightness) der OKLCH-Farbe anpassen. Dies geschieht durch Addition oder Subtraktion eines Wertes zum bestehenden L-Wert.
```css
oklch(calc(var(--brand-color-l) + 0.1) var(--brand-color-c) var(--brand-color-h))
```
--------------------------------
### Farbton verändern mit OKLCH (CSS)
Source: https://www.kern-ux.de/design-system/foundations/farbe
Ändern Sie den Farbton einer Farbe, indem Sie den H-Wert (Hue) der OKLCH-Farbe anpassen. Dies ermöglicht es, den Farbton zu verändern, während Helligkeit und Sättigung gleich bleiben.
```css
oklch(var(--brand-color-l) var(--brand-color-c) calc(var(--brand-color-h) + 15))
```
--------------------------------
### Farbe intensiver oder matter darstellen mit OKLCH (CSS)
Source: https://www.kern-ux.de/design-system/foundations/farbe
Passen Sie die Sättigung einer Farbe an, indem Sie den C-Wert (Chroma) der OKLCH-Farbe modifizieren. Ein kleinerer C-Wert führt zu einer graueren Farbe, während ein größerer Wert die Intensität erhöht.
```css
oklch(var(--brand-color-l) calc(var(--brand-color-c) * 0.5) var(--brand-color-h))
```
--------------------------------
### JavaScript Theme Toggle Implementation
Source: https://www.kern-ux.de/design-system/erste-schritte/entwicklerinnen/light-dark-modus
This JavaScript code provides a functional toggle for switching between light and dark modes. It listens for clicks on a button with the ID 'theme-toggle' and alternates the `data-kern-theme` attribute on the `` element. It requires a button element in the HTML and manipulates the DOM.
```javascript
document.getElementById('theme-toggle').addEventListener('click', function () {
const html = document.documentElement;
const currentTheme = html.getAttribute('data-kern-theme');
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
html.setAttribute('data-kern-theme', newTheme);
});
```
--------------------------------
### Design Token für Steuerungs-Elemente
Source: https://www.kern-ux.de/design-system/foundations/interaktion
Diese Token definieren die Farbgebung für Steuerungs-Elemente wie Buttons und Links. Die Intensität der 'Action-Color' gibt die Priorität der Aktion an. Sie beeinflussen Hintergrund-, Text- und Randfarben.
```css
--kern-color-action-...
```
--------------------------------
### Design Token für Eingabe-Elemente
Source: https://www.kern-ux.de/design-system/foundations/interaktion
Diese Token sind speziell für Formularelemente wie Textfelder, Checkboxen und Radios konzipiert. Sie werden für die visuelle Gestaltung der Eingabefelder verwendet und stellen sicher, dass die Texte konsistent mit den allgemeinen Layout-Token sind.
```css
--kern-color-form-input-[...]
--kern-layout-text
```