HTML Theme-Switcher

Dies ist ein Webfund, wo der Code etwas angepasst wurde, damit das Ganze auch lauffähig ist.

So sieht es in Aktion aus

HTML-Code

Hinweis: Diese HTML-Datei ist Web-Konform. Das Original enthielt zu viele Fehler.

Original von haxzie

Tipp: WordPress HTML Theme Switcher

<!DOCTYPE html>
<html lang="en" class="theme-light">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Light and Dark theme switcher</title>
    <style>
      html,
      body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      }
      .theme-light {
      --color-primary: #0060df;
      --color-secondary: #fbfbfe;
      --color-accent: #fd6f53;
      --font-color: #000000;
      }
      .theme-dark {
      --color-primary: #17ed90;
      --color-secondary: #2a2c2d;
      --color-accent: #12cdea;
      --font-color: #ffffff;
      }
      .container {
      display: flex;
      width: 100%;
      height: 100%;
      background: var(--color-secondary);
      flex-direction: column;
      justify-content: center;
      align-items: center;
      }
      .container h1 {
      color: var(--font-color);
      font-family: sans-serif;
      }
      .container button {
      color: var(--font-color);
      background: var(--color-primary);
      padding: 10px 20px;
      border: 0;
      border-radius: 5px;
      }
      /* The switch - the box around the slider */
      .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
      }
      /* Hide default HTML checkbox */
      .switch input {
      opacity: 0;
      width: 0;
      height: 0;
      }
      /* The slider */
      .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: 0.4s;
      transition: 0.4s;
      }
      .slider:before {
      position: absolute;
      content: "";
      height: 40px;
      width: 40px;
      left: 0px;
      bottom: 4px;
      top: 0;
      bottom: 0;
      margin: auto 0;
      -webkit-transition: 0.4s;
      transition: 0.4s;
      box-shadow: 0 0px 15px #2020203d;
      background: white url('night.png');
      background-repeat: no-repeat;
      background-position: center;
      }
      input:checked + .slider {
      background-color: #2196f3;
      }
      input:focus + .slider {
      box-shadow: 0 0 1px #2196f3;
      }
      input:checked + .slider:before {
      -webkit-transform: translateX(24px);
      -ms-transform: translateX(24px);
      transform: translateX(24px);
      background: white url('sunny.png');
      background-repeat: no-repeat;
      background-position: center;
      }
      /* Rounded sliders */
      .slider.round {
      border-radius: 34px;
      }
      .slider.round:before {
      border-radius: 50%;
      }
    </style>
    <script>
      window.console = window.console || function(t) {};
      if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); }
    </script>
  </head>
  <body>
    <div class="container">
      <h1>Theme Switcher</h1>
      <label id="switch" class="switch">
      <input type="checkbox" onchange="toggleTheme()" id="slider">
      <span class="slider round"></span>
      </label>
      <!-- <button id="switch" onclick="toggleTheme()">Switch</button> -->
    </div>
    <script id="rendered-js" >
      // function to set a given theme/color-scheme
      function setTheme(themeName) {
        localStorage.setItem('theme', themeName);
        document.documentElement.className = themeName;
      }
      
      // function to toggle between light and dark theme
      function toggleTheme() {
        if (localStorage.getItem('theme') === 'theme-dark') {
          setTheme('theme-light');
        } else {
          setTheme('theme-dark');
        }
      }
      
      // Immediately invoked function to set the theme on initial load
      (function () {
        if (localStorage.getItem('theme') === 'theme-dark') {
          setTheme('theme-dark');
          document.getElementById('slider').checked = false;
        } else {
          setTheme('theme-light');
          document.getElementById('slider').checked = true;
        }
      })();
    </script>
  </body>
</html>

Demo und Download

Demo-Seite | Datei herunterladen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Alex Haack
Datenschutz-Übersicht

Diese Website verwendet Cookies, damit wir dir die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in deinem Browser gespeichert und führen Funktionen aus, wie das Wiedererkennen von dir, wenn du auf unsere Website zurückkehrst, und hilft unserem Team zu verstehen, welche Abschnitte der Website für dich am interessantesten und nützlichsten sind.