Dark mode weboldalakon - Yetio prog blog

2021-10-18

A legtöbb böngészőt lehet már sötét módban használni. 2 előnye is van ennek:

kevés fénynél kényelmesebb olvasni sötét háttér mellett világos szöveget
OLED és AMOLED telefonoknál kevésebb energiát használ a megjelenítésre, így lassabban merül le.

Kutattam, hogy mi a legjobb módja, hogy a weboldalon automatikusan, zökkenőmentesen menjen a téma váltás világos és sötét között. Legjobb megoldásnak a szimpla mezei css vátlozók használatát találtam kis javascript mágiával.

Egyszerű példa

<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>
      .light {
        --text-color: #000000;
        --bg-color: #ffffff;
      }

      .dark {
        --text-color: #ffffff;
        --bg-color: #000000;
      }

      body {
        color: var(--text-color);
        background-color: var(--bg-color);
      }
    </style>

    <script>
      if (typeof window !== "undefined") {
        var root = window.document.documentElement;
        var mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
        root.classList.add(mediaQueryList.matches ? "dark" : "light");

        mediaQueryList.addEventListener("change", function (e) {
          var isDark = e.matches;
          root.classList.remove(isDark ? "light" : "dark");
          root.classList.add(isDark ? "dark" : "light");
        });
      }
    </script>
  </head>

  <body>
    <h1>Some title</h1>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu erat
      sapien. Nam consectetur vulputate erat, at laoreet orci accumsan ut. Donec
      eu maximus nibh, id bibendum turpis. Vivamus condimentum tincidunt enim,
      in semper erat vehicula id. Integer fringilla at tellus vel suscipit.
      Suspendisse semper rhoncus est, id efficitur lorem gravida a. Mauris
      sagittis bibendum odio sed fringilla. Vestibulum id massa id quam gravida
      auctor congue in nisl. Praesent vel tellus non sem venenatis laoreet at id
      enim. Nunc varius augue nisi, at euismod mauris venenatis sed.
      Pellentesque fringilla nec nulla vel aliquam. Integer ac suscipit lectus.
      In nisl ligula, finibus ut diam ut, vestibulum dignissim ligula.
    </p>
  </body>
</html>

A javascript kód 2 dolgot csinál:

Az oldal betöltésekor a html tag-nek beállítja a böngészőnek belállított témának megfelelő témát, azaz, ha sötét módban van, akkor a dark css osztályt, különben a light css osztályt
Az esetleges böngészés közbeni témaváltások kezelésére beállít egy listenert, ami témaváltáskor a megfelelő css osztályt rakja rá a html tagre

Ha a body végére tenném a scriptet, az gyorsítaná az oldal betöltését, de ebben az esetben pont az a lényeg, hogy még a tartalom megjelenése előtt a helyes téma legyen beállítva.

Példa kapcsológombbal

Hogy egyszerű legyen kipróbalni a témaváltást, a fenti példát kiegészítettem egy gombbal:

<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>
      .light {
        --text-color: #000000;
        --bg-color: #ffffff;
      }

      .dark {
        --text-color: #ffffff;
        --bg-color: #000000;
      }

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

      button {
        color: var(--bg-color);
        background-color: var(--text-color);
      }
    </style>

    <script>
      var forcedTheme;

      function setTheme(toDark) {
        var root = window.document.documentElement;

        root.classList.remove(toDark ? "light" : "dark");
        root.classList.add(toDark ? "dark" : "light");
      }

      if (typeof window !== "undefined") {
        var root = window.document.documentElement;
        var mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
        root.classList.add(mediaQueryList.matches ? "dark" : "light");

        mediaQueryList.addEventListener("change", function (e) {
          if (!forcedTheme) {
            setTheme(e.matches);
          }
        });
      }
    </script>
  </head>

  <body>
    <h1>Some title</h1>

    <button id="changeButton" onclick="">Change to THEME</button>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu erat
      sapien. Nam consectetur vulputate erat, at laoreet orci accumsan ut. Donec
      eu maximus nibh, id bibendum turpis. Vivamus condimentum tincidunt enim,
      in semper erat vehicula id. Integer fringilla at tellus vel suscipit.
      Suspendisse semper rhoncus est, id efficitur lorem gravida a. Mauris
      sagittis bibendum odio sed fringilla. Vestibulum id massa id quam gravida
      auctor congue in nisl. Praesent vel tellus non sem venenatis laoreet at id
      enim. Nunc varius augue nisi, at euismod mauris venenatis sed.
      Pellentesque fringilla nec nulla vel aliquam. Integer ac suscipit lectus.
      In nisl ligula, finibus ut diam ut, vestibulum dignissim ligula.
    </p>

    <script>
      if (typeof window !== "undefined") {
        var root = window.document.documentElement;
        var changeButton = window.document.getElementById("changeButton");

        var isDark = root.className.includes("dark");

        changeButton.innerText = changeButton.innerText.replace(
          "THEME",
          isDark ? "light" : "dark"
        );

        changeButton.onclick = function () {
          forcedTheme = true;
          var toDark = !root.className.includes("dark");
          setTheme(toDark);
          var buttonTextWords = changeButton.innerText.split(" ");
          buttonTextWords[2] = toDark ? "light" : "dark";
          changeButton.innerText = buttonTextWords.join(" ");
        };
      }
    </script>
  </body>
</html>

Itt tudjátok kipróbálni

Használjátok egészséggel! ;)