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

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 Modus
  • dark → Dunkler Modus

Standardverhalten​

Falls kein data-kern-theme gesetzt ist:

  • Standard ist light, sofern keine Benutzereinstellung existiert.
  • Falls prefers-color-scheme: dark erkannt wird, wird dark verwendet.

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"></html>

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.

Mitdiskutieren und beitragen​

Hilf mit, die Token zu verbessern, in dem du Fragen, Feedback oder Verbesserungsvorschläge im „Light- und Dark-Modus“ KERN Diskussion – Ticket auf openCode teilst.

Hast du eigene Lösungen, Beispiele oder Erweiterungen? Dann teile sie im KERN Katalog der Community.

Inhaltsverzeichnis