suchen

Heim >Web-Frontend >js-Tutorial >So erkennen Sie, ob sich ein Benutzer in Js im dunklen Modus befindet

So erkennen Sie, ob sich ein Benutzer in Js im dunklen Modus befindet

王林
王林Original
2024-08-24 22:30:03665Durchsuche

How to Detect if a User is in Dark Mode In Js

Einführung

Haben Sie sich jemals gefragt, wie Websites basierend auf Ihren Vorlieben nahtlos zwischen hellem und dunklem Modus wechseln? Es ist keine Zauberei – es ist ein cleverer Einsatz moderner Webtechnologien. In diesem Beitrag werde ich die einfache, aber leistungsstarke Technik enthüllen, die hinter der Erkennung steckt, ob ein Benutzer den Dunkelmodus bevorzugt, und wie Sie diese Informationen nutzen können, um das Benutzererlebnis auf Ihrer Website zu verbessern.

Grundlegendes zur Erkennung des Dunkelmodus

Mit der Beliebtheit des Dunkelmodus bieten viele Websites und Anwendungen mittlerweile Themen an, die auf die Systempräferenzen des Benutzers abgestimmt sind. Diese Funktion wird mithilfe der matchMedia-API in JavaScript erreicht, die es Webanwendungen ermöglicht, auf Änderungen in Medienabfragen zu reagieren, beispielsweise auf die Farbschemapräferenz des Benutzers.

Wie es funktioniert

Die matchMedia-API

Die window.matchMedia-Methode bietet eine Möglichkeit, Medienanfragen auszuwerten und das Erscheinungsbild Ihrer Website basierend auf den Präferenzen des Benutzers anzupassen. Um zu überprüfen, ob der Dunkelmodus aktiviert ist, können Sie die folgende JavaScript-Funktion verwenden:

// Check if the user prefers dark mode
function isDarkMode() {
    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}

Praktische Umsetzung

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Dark Mode Demo</title>
    <style>
        .dark {
            background: black;
            color: white;
        }
        .light {
            background: white;
            color: black;
        }
    </style>
</head>
<body>

    <h1>Hello, World!</h1>

    <!-- scripts -->
    <script>
        // Function to check if dark mode is enabled
        function isDarkMode() {
            return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
        }

        // Function to update the theme based on the user's preference
        function updateTheme() {
            if (isDarkMode()) {
                document.body.classList.add("dark");
                document.body.classList.remove("light");
            } else {
                document.body.classList.add("light");
                document.body.classList.remove("dark");
            }
        }

        // Initial theme setup
        updateTheme();

        // Listen for changes in the color scheme preference
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme);
    </script>
</body>
</html>
  • updateTheme-Funktion: Diese Funktion überprüft die Dunkelmodus-Präferenz und aktualisiert die Klasse entsprechend. Echtzeit-Updates: MatchMedia wurde ein Ereignis-Listener hinzugefügt, um Änderungen in der Farbschemaeinstellung zu erkennen und Update-Theme aufzurufen, um das Erscheinungsbild in Echtzeit anzupassen.

Wenn Sie das Farbschema Ihres Systems ändern, passt sich die Website automatisch an Ihre Präferenzen an, ohne dass die Seite aktualisiert werden muss.

Folgen Sie mir auf GitHub Avinash Tare

Das obige ist der detaillierte Inhalt vonSo erkennen Sie, ob sich ein Benutzer in Js im dunklen Modus befindet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html if switch using class Event JS function this github
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Die besten kostenlosen APIs, die Sie kennen müssen, in 4Nächster Artikel：Die besten kostenlosen APIs, die Sie kennen müssen, in 4

In Verbindung stehende Artikel

Mehr sehen