Zum Hauptinhalt springen
Leichte Sprache Gebärdensprache| KERN Katalog KERN Figma KERN openCode
Version: 2.1.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">

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.

Inhaltsverzeichnis