Light- und Dark-Modus
Automatische Erkennung des Farbmodus
Moderne Browser erkennen die bevorzugte Farbpalette des Nutzers (hell oder dunkel) mithilfe des prefers-color-scheme-Medienmerkmals:
@media (prefers-color-scheme: dark) {
:root {
/* Variablen für den Dunkelmodus */
}
}
Da Webseiten diese Einstellung nicht direkt ändern können, ist es sinnvoll, das data-kern-theme-Attribut oder eine CSS-Klasse zu verwenden.
KERN-UX Farbmodi
KERN-UX unterstützt folgende Werte für data-kern-theme:
light→ Heller Modusdark→ Dunkler Modus
Standardverhalten
Falls kein data-kern-theme gesetzt ist:
- Standard ist
light, sofern keine Benutzereinstellung existiert. - Falls
prefers-color-scheme: darkerkannt wird, wirddarkverwendet.
Manuelles Festlegen des Farbmodus
Für bestimmte Bereiche
Das data-kern-theme-Attribut kann auf einzelne HTML-Elemente gesetzt werden:
<div>
Standardmodus (nutzt die Voreinstellung des Nutzers oder den Standardwert).
</div>
<div data-kern-theme="dark">
Dieser Bereich bleibt im Dunkelmodus.
</div>
Für die gesamte Webseite
Setze das Attribut direkt auf das <html>-Element:
<html data-kern-theme="dark">
Dadurch bleibt die gesamte Seite im Dunkelmodus, unabhängig von den Browsereinstellungen des Nutzers.
Farbmodus-Umschaltung (Toggle)
Ein einfacher Toggle-Mechanismus per JavaScript:
<button id="theme-toggle">Toggle Theme</button>
<script>
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);
});
</script>
Usability & Barrierefreiheit
Warum ein Toggle sinnvoll ist
- Benutzerkontrolle: Nutzer können das Theme individuell anpassen.
- Systemeinstellungen respektieren: Standardmäßig folgt das Design der Systempräferenz.
- Barrierefreiheit: Personen mit Sehbeeinträchtigungen oder Lichtempfindlichkeit profitieren von einer anpassbaren Darstellung.
Best Practices
- Visuelle Rückmeldung geben (z. B. durch ein Icon oder Textänderung).
- Einstellung speichern, damit die Präferenz erhalten bleibt.
- Guter Kontrast nach WCAG-Richtlinien für optimale Lesbarkeit.
Dieser Ansatz stellt sicher, dass der Dark Mode sowohl technisch effizient als auch nutzerfreundlich und barrierefrei umgesetzt wird.