Dark- & Lightmode
Der Dark- & Lightmode ist als einfache, zustandsbasierte UI-Funktion implementiert und ermöglicht den Wechsel zwischen hellen und dunklen Farbschemata ohne zusätzliche Abhängigkeiten oder komplexe Theme-Logik. Die Steuerung erfolgt über ein definiertes Toggle-Element, das automatisch erkannt und an die Engine angebunden wird.
Verwendung
<button id="darkmode">
</button>
Icon automatisch tauschen
CSS Anwendungsaufbau
:root{
/* Farbvariablen für Lightmode definieren */
/* und im SCSS / CSS verwenden */
--color: #000000;
}
html[data-scheme="dark"] {
/* Variablen mit gewünschter Farbe für */
/* Darkomde überschreiben hier überschreiben */
--color: #FFFFFF;
}