Dark Mode Umschalter

Von /

Dark Mode ist eine Benutzeroberflächenoption, die in den letzten Jahren in vielen Betriebssystemen, Apps und Webseiten immer populärer geworden ist.

Im Dark Mode werden helle Farben, vor allem Hintergründe, durch dunklere Farbtöne ersetzt. Das bedeutet, anstatt schwarzen Text auf weißem Hintergrund zu haben, könntest du zum Beispiel weißen Text auf schwarzem oder dunkelgrauem Hintergrund haben.

Rechts siehst du ein Beispiel mit einem Button als Umschalter für den Darkmode. Den Code dafür kannst du aus untenstehendem Code-Block einfach herauskopieren.

Code für Dark Mode (HTML, CSS, JavaScript)

Ein einfacher Dark Mode-Umschalter kann mit ein paar Zeilen HTML, CSS und JavaScript erstellt werden. Hier ist ein Beispiel, wie du einen Dark Mode in einer einzigen Datei aktivieren kannst:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Mode Beispiel</title>
    <style>
        /* Standard-Styles (Light Mode) */
        body {
            font-family: Arial, sans-serif;
            background-color: #fff;
            color: #333;
        }
        .dark-mode {
            background-color: #333;
            color: #fff;
        }
        .toggle-button {
            display: inline-block;
            padding: 10px 20px;
            margin: 10px;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>

<h1>Dark Mode Beispiel</h1>
<p>Drücke den untenstehenden Button, um zwischen Dark Mode und Light Mode zu wechseln.</p>

<button class="toggle-button" onclick="toggleDarkMode()">Dark Mode Umschalten</button>

<script>
    function toggleDarkMode() {
        let bodyElement = document.body;
        
        if(bodyElement.classList.contains('dark-mode')) {
            bodyElement.classList.remove('dark-mode');
        } else {
            bodyElement.classList.add('dark-mode');
        }
    }
</script>

</body>
</html>

Wenn du den obigen Code in eine HTML-Datei einfügst und diese in einem Webbrowser öffnest, solltest du einen Button sehen. Beim Klicken auf den Button wird zwischen dem Dark Mode und dem Light Mode umgeschaltet.

Warum könnte ein Darkmode für deine Webseiten interessant sein?

  1. Augenfreundlich in dunkler Umgebung: In einem dunkleren Raum oder bei geringem Umgebungslicht kann ein helles Display ziemlich blendend wirken. Ein Dark Mode kann in solchen Situationen angenehmer für die Augen sein und die Ermüdung reduzieren.
  2. Energieeinsparung bei OLED- und AMOLED-Displays: Bei diesen Bildschirmtechnologien werden Pixel, die schwarz dargestellt werden, tatsächlich ausgeschaltet. Das bedeutet, dass dunkle Benutzeroberflächen weniger Energie verbrauchen können, besonders wenn sie hauptsächlich schwarz sind.
  3. Ästhetik und Auswahl: Manchen Leuten gefällt einfach die Ästhetik des Dark Modes besser. Es bietet auch eine zusätzliche Personalisierungsoption für Nutzer, die vielleicht den traditionellen hellen Modus vorziehen, aber ab und zu gerne wechseln möchten.
  4. Reduziertes Blaulicht: Es wird oft gesagt, dass Blaulicht, das von Bildschirmen ausgestrahlt wird, den Schlaf beeinträchtigen kann. Einige behaupten, dass Dark Mode, insbesondere in den Abendstunden, helfen kann, die Menge an Blaulicht, die man vor dem Schlafengehen ausgesetzt ist, zu reduzieren.
  5. Trend: Einfach ausgedrückt, Dark Mode ist aktuell im Trend. Viele moderne Betriebssysteme und Apps bieten diese Funktion an, und viele Nutzer erwarten sie mittlerweile auch von Webseiten.
Nach oben scrollen