Veröffentlicht in Web.

Implementierung von Dunkel- und Hellmodus mittels eines Umschaltknopfes

Nicole Tänzer | 11.2023.

Co-Autor(en): Lizzie Niedermaier

In einer zunehmend digitalen Welt, in der Bildschirme einen festen Platz in unserem Alltag gefunden haben, wird die Bedeutung von Anpassbarkeit und Benutzerfreundlichkeit immer wichtiger. Dieses Tutorial veranschaulicht Ihnen, wie Sie einen Umschaltknopf für den Dunkel- und Hellmodus integrieren können, um die manuelle Umschaltung zu ermöglichen.

HTML

Im ersten Schritt erstellen Sie die Grundstruktur der Webseite in HTML. Hier finden Sie den HTML-Code unserer Beispielwebsite mit den grundlegenden HTML Elementen. Wie erkennbar, haben wir auch bereits ein externes CSS-Dokument erstellt, das im <head> verlinkt wird. Im <nav> ist Platz für den Switch, der im nächsten Schritt hinzu kommt.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <nav>
    <!-- Hier wird später der Switch eingefügt -->
    </nav>
    
    <main>
    <section>
        <article class="post">
        <h1>Implementierung von Dunkel- und Hellmodus mittels eines
            Umschaltknopfs</h1>
        <p class="post-meta">Lizzie Niedermaier und Nicole Tänzer</p> 
        <p>Dies ist die Beispielwebsite unseres Tutorials.</p>
        </article>
    </section>
    </main>
</body>
</html>

Anschließend müssen wir den Schalter in die Navigationsleiste der Website integrieren. Dabei fügen wir im <nav> den Switch hinzu, mit dem der Nutzer später manuell zwischen dem Hell- und Dunkelmodus wechseln kann. Dieser basiert auf einer Checkbox, die später im CSS-Dokument gestaltet wird.

<nav>
  <div class="theme-switch-wrapper">
     <label class="theme-switch" for="checkbox">
        <input type="checkbox" id="checkbox" />
        <div class="slider round"></div> 
     </label>
     <em>Switch Dark/Light Mode!</em>
  </div> 
</nav>

Nun sieht die Seite mit der klassischen Checkbox ganz ohne weitere CSS-Gestaltung zunächst einmal so aus:

CSS-Gestaltung der Webseite

Im CSS-Dokument werden zunächst Variablen definiert. Dies sind Farbschemas, die je nach aktiviertem Modus eingesetzt werden. Einmal für den hellen Modus html und einmal für den dunklen Modus data-theme="dark".

html {
   --primary-color: #dcd3c4; 
   --secondary-color: #796348; 
   --font-color: #000000; 
   --bg-color: #fffaf4; 
   --heading-color: #292922;
}
[data-theme="dark"] { 
   --primary-color: #b3b2d7; 
   --secondary-color: #9a9172; 
   --font-color: #ffeec3; 
   --bg-color: #31291e; 
   --heading-color: #ffeec3;
}

Diese zuvor definierten Variablen werden nun in der restlichen CSS-Gestaltung der Website an Stelle von normalen color-codes eingesetzt.

Überall wo wir im CSS-Code eine Variable zuordnen, verweisen wir mit der »var« Funktion. Dadurch werden die jeweiligen Farben für den Darkmode überschrieben.

@import url(https://fonts.googleapis.com/css?family=Lato:400,400italic,700|Sansita+One);

body {
   font-family: "Lato", sans-serif; 
   background-color: var(--bg-color); 
   color: var(--font-color);
   max-width: 90%;
   margin: 0 auto;
   font-size: 1rem;
}
h1 {
   color: var(--heading-color); 
   font-family: "Sansita One", serif; 
   font-size: 2rem;
   margin-bottom: 1vh;
} 
p {
   font-size: 1.1rem;
   line-height: 1.6rem;
}
section {
   max-width: 68%;
   margin: 0 auto;
}
.post-meta {
   font-size: 1rem;
   font-style: italic;
   display: block; 
   margin-bottom: 4vh;
   color: var(--secondary-color);
}
nav {
   display: flex; 
   justify-content: flex-end; 
   padding: 20px 0;
}

Nun sieht die Seite bereits deutlich ansprechender aus. Allerdings fehlt noch die Gestaltung der Checkbox, die im nächsten Schritt erklärt wird, sowie die abschließende Einbindung von JavaScript. Dadurch kann der Modus bei Betätigen der Checkbox ebenfalls gewechselt werden.

CSS-Gestaltung des Switches

Die ursprüngliche Checkbox wird so gestaltet, dass daraus ein Umschaltknopf wird, der sich bei Benutzung nach links oder rechts bewegt.

Der Switch lässt sich auf viele verschiedene Weisen gestalten, im Folgenden stellen wir Ihnen drei Varianten vor:

Variante 1

1. Basisdesign

Um einen Umschaltknopf zu erstellen, muss zuerst das Basisdesign festgelegt werden, dieses besteht aus den folgenden Komponenten:

1.1. Flex-Container

Die CSS-Klasse .theme-switch-wrapper hat die Funktion, das Styling und die Positionierung für den gesamten Themenumschalter »Switch« und seine zugehörigen Elemente zu definieren. Hier sind die wichtigsten Funktionen dieser Klasse:

.theme-switch-wrapper {
  display: flex;
  align-items: center;
}

Der Umschalter und seine Beschriftung werden in einem flexiblen Container angezeigt display: flex;
Der Befehl align-items: center; sorgt dafür, dass die Elemente vertikal zentriert sind

1.2. Abstand zur Beschriftung

.theme-switch-wrapper em {
  margin-left: 10px;
  font-size: 1rem;
}

Die Beschriftung wird durch die margin-left: 10px; , um 10 Pixel von der linken Seite des Umschalters verschoben
Die Schriftgröße wird auf »1 rem« festgelegt

1.3. Container

.theme-switch {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px;
}

Im nächsten Schritt wird der Container für den Umschalter erstellt. Der Container wird relativ positioniert.

Insgesamt fungiert .theme-switch-wrapper als Container, der den Themenumschalter und seine Beschriftung zusammenhält und für eine ansprechende visuelle Darstellung sorgt.

2. Verstecken der Checkbox

Die tatsächliche Checkbox wird durch den folgenden Befehl versteckt, da der visuelle Umschalter anstelle der Checkbox angezeigt werden soll.

.theme-switch input {
  display: none;
}

3. Design des Umschalter-Hintergrunds (Slider)

Als nächstes wird das Design des Umschalters festgelegt. In diesem Beispiel wurde als Hintergrundfarbe des Umschalters hellgrau gewählt.

.slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
  }

Die CSS Eigenschaft cursor: pointer schaltet den Mauszeiger »cursor« zu einer Hand, wenn er über das betreffende HTML-Element bewegt wird (in diesem Fall den Knopf), was darauf hinweist, dass dieser Bereich anklickbar ist.

Die transition: .4s; bewirkt einen sanften Farbübergangseffekt während des Zustandswechsels.

4. Design des Umschalterknopfes (slider-before)

Hier wird der visuelle Knopf des Umschalters erstellt. Die transition: .4s; sorgt für eine fließende Animation während des Zustandswechsels.

.slider:before {
    background-color: #fff;
    bottom: 4px;
    content: "";
    height: 26px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 26px;
  }

5. Änderung des Hintergrunds und der Position des Knopfes bei aktivierter Checkbox

Wenn die Checkbox aktiviert ist, ändert sich die Hintergrundfarbe des Umschalters zu einer orangefarbenen Farbe #b57d03. Der Griff wird durch transform: translateX(26px);, um 26 Pixel nach rechts verschoben.

Dadurch sieht man, dass der Schalter eingeschaltet ist.

input:checked + .slider {
    background-color: #b57d03;
  }
  
  input:checked + .slider:before {
    transform: translateX(26px);
  }

6. Abgerundetes Design

Um abgerundete Ecken beim Slider zu bekommen, wird .slider.round und slider.round:before in den CSS-Code integriert.

.slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

Variante 2

Einbindung visueller Effekte in den Umschaltknopf

Um verschiedene visuelle Optionen zu veranschaulichen, wurden als Beispiele mehrere Varianten entwickelt. Im Folgenden wird die zweite Variante des Designs gezeigt.

Dabei wurde im Vergleich zum vorherigen Knopf eine Zoom-In-Animation, einen 3D-Effekt und ein Schattenwurf in das Design des Umschaltknopfes integriert.

1. 3D-Effekt

Für einen 3D-Effekt wird der CSS Code im ».slider-Selektor« erweitert. Dabei werden folgende Befehle verwendet: transform-style: preserve-3d; und transform: perspective(1000px);. Diese Eigenschaften geben dem Slider eine dreidimensionale Darstellung.

2. Schattenwurf

Um einen Schattenwurf zu bekommen, fügt man den ».slider-Selektor« eine Box-Shadow hinzu: box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2):

Horizontale Verschiebung (x): 0
Vertikale Verschiebung (y): 4px
Unschärfebereich (Blur): 8px
Farbe: rgba(0, 0, 0, 0.2)

Diese Zahlen steuern somit die Position, die Schärfe und die Farbe des Schattens und der Slider wird dadurch hervorgehoben.

.slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
    transform-style: preserve-3d; /* 3D-Darstellung */
    transform: perspective(1000px); /* Perspektive für 3D-Effekt */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Intensiverer Schattenwurf */
  }

3. Zoom-in-Animation für den Slider

Wenn der Dark Mode aktiviert ist input:checked + .slider, wird eine Zoom-in-Animation hinzugefügt: transform: scale(1.1) translateY(-1px).

Diese bewirkt, dass der Slider beim Umschalten ein wenig größer wird und leicht nach oben verschoben wird.

input:checked + .slider {
  background-color: #b57d03;
  transform: scale(1.1) translateY(-1px); /* Kleines Hüpfen beim Umschalten (Zoom-in) */
}

Variante 3

Implementierung von Bildern auf dem Umschaltknopf je nach Modus mit einer Bildrotation

Für das Einfügen der Bilder wird der background-image Befehl verwendet. Es ist dabei wichtig, dass die Bilddateien im gleichen Verzeichnis wie die CSS- und HTML-Dateien gespeichert werden und das Dateiformat »JPG« haben.

1. Bild für den hellen Modus festlegen

Als erstes, wird das Bild für den hellen Modus festgelegt und die Bildgröße- und position wird angepasst.

Die Größe des Bildes wird auf »cover« gesetzt, um es an den Schalter anzupassen.

.slider:before {
  z-index: 1;
  content: "";
  background-image: url('sonne.jpg'); /* Bild für den hellen Modus */
  background-size: cover;
  height: 19px;
  left: 25%;
  position: relative;
  top: 4%;
  transform: translateX(-84%);
  transition: .4s;
/*...weiterfolgender CSS-Code...*/

2. Styling für den Umschalter

Weitere Stile werden angewendet, um den Schalter visuell ansprechend zu gestalten einschließlich abgerundeter Ecken, Schatten und Zentrierung des Inhalts.

/*...vorheriger CSS-Code...*/
width: 19px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 17px;
}

3. Bild für den dunklen Modus festlegen

Zunächst wird ein Bild bei .slider:before festgelegt, welches im dunklen Modus erscheinen soll.

[data-theme="dark"] .slider:before {
  background-image: url('mond.jpg'); /* Bild für den dunklen Modus */
  font-size: 14px;
  position: relative;
  transform: translateY(60px) translateX(20px);
}

4. Bildänderung bei aktivierter Checkbox im dunklen Modus

Wenn die Checkbox aktiviert ist, wird das Bild zu »mond.jpg« geändert und eine Verschiebung wird angewendet.

input:checked + .slider:before {
  background-image: url('mond.jpg'); /* Bild für den dunklen Modus */
  transform: translateY(0px) translateX(30px);
  font-size: 20px;
}

5. Bildrotation im dunklen Modus mit aktivierter Checkbox

Zusätzlich zur Verschiebung wird eine Rotation von 360° hinzugefügt, um einen Drehungseffekt zu erzeugen.

.theme-switch input:checked + .slider:before {
  background-image: url('mond.jpg'); /* Bild für den dunklen Modus */
  transform: translateY(0px) translateX(30px) rotate(360deg);
  font-size: 20px;
}

input:not(:checked) + .slider:before {
  background-image: url('sonne.jpg'); /* Bild für den hellen Modus */
}

Java-Script

Damit das Drücken des Buttons tatsächlich für einen Wechsel zwischen dem hellen und dem dunklen Modus sorgt, muss die Funktion des Buttons in JavaScript definiert werden.

Über das <script> Element wird JavaScript direkt in das HTML-Dokument eingefügt.

1. Checkbox und das aktuelle Theme anwählen

Zunächst wird der Switch und das auf dem Gerät des Nutzers aktuelle Theme (hell oder dunkel) abgerufen.

const toggleSwitch = document.querySelector('.theme-switch       
      input[type="checkbox"]');
   const currentTheme = localStorage.getItem('theme');

2. Switch dem aktuellen Theme anpassen

Nun wird herausgefunden, ob das aktuelle Theme auf dem Gerät dem Hell- oder Dunkelmodus entspricht. Sollte es sich im Dunkelmodus befinden, dann ist der Switch automatisch aktiviert (toggleSwitch.checked =true).

if (currentTheme) {
      document.documentElement.setAttribute('data-theme', currentTheme); 
      
      if (currentTheme === 'dark') {
         toggleSwitch.checked = true;
      }
    }

3. Funktion des Switches einführen

Nun wird die Funktion des Switches - das Wechseln zwischen Hell- und Dunkelmodus - eingeführt. Dafür wird die Funktion »switchTheme« eingesetzt die dafür sorgt, dass bei Betätigung des Switches jedes Mal der Modus gewechselt wird.

If(e.target.checked), ist der Switch gedrückt, dann wird das Theme 'dark' eingesetzt. Dies bedeutet, dass dann die vorher definierten CSS-Variablen aus dem data-theme=dark genutzt werden.

else, falls der Schalter nicht aktiviert ist, wird das Theme auf 'light' gesetzt.

Zum Schluss wird noch ein EventListener eingesetzt, dies ist eine Funktion, die dafür sorgt das darauf gewartet wird bis ein gewisses Ereignis eintritt (Switch wird gedrückt) und dann darauf reagiert (Theme wird gewechselt).

function switchTheme(e) { 
      if (e.target.checked) {
         document.documentElement.setAttribute('data-theme', 'dark');
         localStorage.setItem('theme', 'dark'); 
      } 
      else {
         document.documentElement.setAttribute('data-theme', 'light');
         localStorage.setItem('theme', 'light'); 
      }

   toggleSwitch.addEventListener('change', switchTheme, false);

Sie sind nun in der Lage eine Website mit einem Switch zu versehen, der es dem Nutzer erlaubt manuell zwischen dem Hell- und Dunkelmodus zu wechseln. Hier sehen sie unsere Beispielwebseite in beiden Modi:

Modusgesteuerte Konfiguration: Helligkeitsregulierung und Bildwechsel

1. Helligkeitsregulierung von Bildern

Für eine ansprechendere Website kann die Helligkeit beim Umschalten angepasst werden, um ein angenehmeres visuelles Erlebnis für die Augen zu schaffen.

Dabei führt man folgende Schritte durch:

Step 1

Zuerst wird ein beliebiges Bild in die HTML-Datei der Website integriert. Dabei ist es entscheidend, dass sich die JPG-Datei im gleichen Verzeichnis wie die HTML- und CSS-Datei befindet.

<section>
      <article class="post">
        <!-- vorheriger Code -->
        <img src="Tagesbild.jpg" alt="Tag" id="adjustable-image">
      </article>

Um das Bild auf seine Verhältnisse anzupassen, wird am Anfang von der CSS-Datei mit #adjustable-image die Größe angepasst.

#adjustable-image {
  width: 400px;
  height: auto;
  transition: transform 0.5s ease-in-out;
}

Step 2

Die Helligkeit eines Bildes lässt sich durch die Verwendung der Funktion adjustBrightnessanpassen. Diese Funktion wird in die JavaScript-Datei eingefügt.

Der aktuelle Modus (heller oder dunkler Modus) wird aus dem data-theme-Attributdocument.documentElement abgerufen.

function adjustBrightness() {
      const image = document.getElementById('adjustable-image');
      const theme = document.documentElement.getAttribute('data-theme');

      if (theme === 'dark') {
        // Dunkler Modus
        image.style.filter = 'brightness(80%)'; // Ändere den Wert je nach Bedarf
      } else {
        // Heller Modus
        image.style.filter = 'brightness(100%)'; // Normaler Wert für Helligkeit
      }
    }

Step 3

Anschließend wird die Funktion switchTheme in die JavaScript-Datei integriert, um das Bild jedes Mal anzupassen, wenn der Umschaltknopf geändert wird.

Die Funktion switchTheme(e) legt ein Ereignisobjekt (e) fest, das üblicherweise durch eine Benutzeraktion wie das Klicken auf den Umschalter ausgelöst wird. Diese Funktion überprüft, ob der Umschalter aktiviert »checked« ist.

Wenn dies der Fall ist, wird der dunkle Modus aktiviert, indem das »data-theme-Attribut« des HTML-Elements auf »dark« gesetzt wird. Wenn der Umschalter nicht aktiviert ist, wird der helle Modus aktiviert, indem das »data-theme-Attribut« auf »light« gesetzt wird.

function switchTheme(e) {
      if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark');
      } else {
        document.documentElement.setAttribute('data-theme', 'light');
        localStorage.setItem('theme', 'light');
      }
      
      adjustBrightness();
    }

1. Bildwechsel durch Umschalten

Um das Bild gleichzeitig mit dem Umschalten des Modus zu ändern, müssen wir die Bilder zu der »Switch-Theme Funktion« in unserer JavaScript-Datei hinzufügen:

function switchTheme(e) {
      const image = document.getElementById('adjustable-image');

      if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark');
        image.src = 'Nachtbild.jpg'; // Bild für den dunklen Modus
      } else {
        document.documentElement.setAttribute('data-theme', 'light');
        localStorage.setItem('theme', 'light');
        image.src = 'Tagesbild.jpg'; // Bild für den hellen Modus
      }

      adjustBrightness();
    }

Wird die Checkbox somit aktiviert, wechselt die Seite in den dunklen Modus. Dabei wird das »data-theme-Attribut« des HTML-Elements auf »dark« gesetzt und das Bild auf »Nachtbild.jpg« geändert.

Wenn die Checkbox deaktiviert wird, wechselt die Seite in den hellen Modus, indem das »data-theme-Attribut« auf »light« gesetzt und das Bild auf »Tagesbild.jpg« geändert wird.

Anschließend wird die Funktion adjustBrightness aufgerufen, um die Helligkeit des Bildes entsprechend dem neuen Modus anzupassen.

Ergebnis

Wir haben unser Tutorial erfolgreich abgeschlossen. Sie sind nun in der Lage, einen designansprechenden Umschaltknopf zu implementieren, der die Website sowohl im Dunkelmodus als auch im Hellmodus anzeigen kann. Zur Veranschaulichung präsentieren wir nun das abschließende Ergebnis.