Dark Mode in JavaScript erkennen mit prefers-color-scheme

Dieses JavaScript-Snippet erkennt, ob der Nutzer seinen Rechner auf Dark Mode gestellt hat, auf Deutsch dunkler Modus. Ist das der Fall, liefert es true zurück. Ein kleines Stück Code, das deine Website oder Anwendung ein Stück zugänglicher macht für alle, die den dunklen Modus bevorzugen.

JavaScript Dark Mode

const isDarkMode = () =>
	globalThis.matchMedia?.("(prefers-color-scheme:dark)").matches ?? false;

// Verwendung
isDarkMode();

Was ist der Dark Mode oder dunkle Modus?

Der Dark Mode ist eine Funktion, mit der du die Farbpalette deines Geräts auf einen dunkleren Ton umstellst. Viele Menschen bevorzugen den dunklen Modus, weil er die Augen weniger ermüdet und Text auf dem Bildschirm leichter lesbar macht. Verfügbar ist er auf sehr vielen Geräten, unter anderem auf Smartphones, Notebooks und Tablets.

Wenn du Anwendungen in JavaScript entwickelst, sorgt ein angebotener Dark Mode für spürbar mehr Komfort bei deinen Nutzern.

Wie aktiviert oder deaktiviert man den dunklen Modus?

So schaltest du dunkle Designs auf den gängigsten Geräten und in den gängigsten Anwendungen ein, unter Windows, Android, Mac und iOS:

Windows

1. Wähle im Startmenü die Einstellungen und dann Personalisierung.
2. Wähle links auf dem Bildschirm die Option Hintergrund. Du kannst dein eigenes dunkles Design herunterladen oder eines von Windows nehmen.
3. Wähle links auf dem Bildschirm die Option Farben. Du kannst eine augenfreundlichere Farbe nehmen, etwa Grau, Bronze oder ein gedämpftes Gelb oder Blau, ganz nach Geschmack.
4. Teste deine Farbwahl im dunklen Design, indem du unter „Standard-App-Modus auswählen“ auf Dunkel klickst. Gefallen dir die gewählten Farben nicht, probierst du einfach etwas anderes.

Android

1. Geh in die Einstellungen, dann zu Bedienungshilfen und schließlich zu Anzeige.
2. Aktiviere das dunkle Design oder die Farbumkehr, um es anzuwenden.

MacOS

1. Öffne die Systemeinstellungen.
2. Klick auf Allgemein.
3. Wähle das Erscheinungsbild, das dir am besten passt. Es gibt Hell, Dunkel und Automatisch, das sich nach der Tageszeit richtet.

iOS

1. Geh in die Einstellungen.
2. Wähle Anzeige und Helligkeit.
3. Aktiviere oder deaktiviere den dunklen Modus.

Fazit

Der dunkle Modus bringt deinen Nutzern echten Komfort. Eine Dark-Mode-Funktion in deiner Anwendung ist deshalb ein Plus, das sich lohnt.

Wenn du weitere Artikel und Tipps rund um JavaScript suchst, wirf einen Blick in meine JavaScript-Artikel.