Wie erstelle ich einen Darkmode für meine Webseite? (HTML, CSS & Javascript)

Seit ein paar Jahren ist das ein absoluter Trend, immer mehr Webseiten und App bauen es ein und zwar rede ich von einem Dark Mode. Was am Tag kein Problem ist nämlich eine Webseite mit weissen Hintergrund und schwarzer Schrift ist am Abend meistens der Grund für viele Augenschmerzen. Aus diesem Grund stellt der Computer alles automatisch auf den Dark Mode um, nämlich schwarzer Hintergrund mit heller Schrift und das tut den Augen viel weniger weh.

Heute zeige ich euch wie ihr auf eure Webseite so ein Dark Mode einbauen könnt. Der Webseiten Besucher kann dann mit einem Klick auf einen Button das Design umschalten. Und als kleines „Zückerchen“ habe ich das ganze so programmiert, dass die Einstellung im Browserspeicher zwischengespeichert wird. Wenn also der User später wieder diese Seite besuchen kommt, dann wird er die Einstellung haben die er vorhin eingestellt hat.

Video

HTML

<header>
      <h1>Hello</h1>
    </header>
    <button id="switcher">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        height="24px"
        viewBox="0 -960 960 960"
        width="24px"
        fill="#1f1f1f"
      >
        <path
          d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Z"
        />
      </svg>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        height="24px"
        viewBox="0 -960 960 960"
        width="24px"
        fill="#1f1f1f"
      >
        <path
          d="M480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Z"
        />
      </svg>
    </button>
    <div class="container">
      <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam
        consectetur maxime illo exercitationem, aperiam quibusdam ea ex
        reprehenderit nisi aut laudantium quas consequuntur dolorum excepturi
        iste sapiente, incidunt ut aliquid tenetur suscipit, commodi libero?
        Obcaecati asperiores a dicta eius corrupti!
      </div>
    </div>
    <div class="container_btn">
      <button class="btn">Webseite aufrufen</button>
    </div>

CSS

:root {
  --background: #eacdc2;
  --headerBG: #b75d69;
  --h1: #774c60;
  --btn: #372549;
  --btnhover: #774c60;
  --fontcolor: #fff;
  --svgcolor: #eacdc2;
  --switcher: #372549;
}

.darkmode {
  --background: #1a1423;
  --headerBG: #372549;
  --h1: #eacdc2;
  --btn: #b75d69;
  --btnhover: #774c60;
  --fontcolor: #fff;
  --svgcolor: #1a1423;
  --switcher: #eacdc2;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--background);
}

header {
  min-height: 30vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  color: var(--h1);
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 250px;
  background-color: var(--headerBG);
}
.text {
  width: 80%;
  text-align: center;
  font-size: 1.3rem;
  color: var(--fontcolor);
}
.container_btn {
  text-align: center;
}
.btn {
  margin: 20px;
  background-color: var(--btn);
  border: 1px solid #000;
  padding: 10px 20px;
  color: var(--fontcolor);
  font-size: 2rem;
}

.btn:hover {
  background-color: var(--btnhover);
  color: var(--fontcolor);
}

#switcher {
  height: 50px;
  width: 50px;
  padding: 0;
  border-radius: 50%;
  background-color: var(--switcher);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 20px;
  right: 20px;
}
#switcher svg {
  fill: var(--svgcolor);
}

#switcher svg:last-child {
  display: none;
}
.darkmode svg:first-child {
  display: none;
}
.darkmode #switcher svg:last-child {
  display: block;
}

Javascript

let darkmode = localStorage.getItem('darkmode');
const Switcher = document.getElementById('switcher');

const enableDarkmode = () => {
    document.body.classList.add('darkmode')
    localStorage.setItem('darkmode', 'active')
}

const disableDarkmode = () => {
    document.body.classList.remove('darkmode')
    localStorage.setItem('darkmode', null)
}

if(darkmode === "active") enableDarkmode()

Switcher.addEventListener("click", () => {
    darkmode = localStorage.getItem("darkmode")
 darkmode !== "active" ? enableDarkmode() : disableDarkmode()  
    
     
})