Cara Menambahkan Dark Mode di Blog - rasgane

Dark Mode adalah mode tampilan pada website atau aplikasi yang mengubah latar belakang menjadi gelap dan teks menjadi terang. Fitur ini dirancang untuk mengurangi kelelahan mata dan meningkatkan kenyamanan penggunaan pada kondisi cahaya yang redup atau gelap. Dark mode juga dapat membantu menghemat daya baterai pada perangkat mobile dengan layar OLED karena warna hitam tidak memerlukan pencahayaan dari lampu latar. Beberapa platform dan aplikasi, seperti Google Chrome, YouTube, dan Twitter, telah menyediakan opsi dark mode sebagai fitur bawaan.

• Results
• Code

Dark Mode V1

Untuk versi Pertama mengunakan metode add Class dark.

Klik Dark Mode Disini

<div class="dark">Klik Dark Mode Disini</div>

 [Untuk Css Harus Atur sendiri tiap tema berbeda-beda.] 

if (localStorage.getItem("isDark")) {
  document.documentElement.classList.add("dark")
}

const root = document.documentElement,
      button = document.querySelector(".Btn-dark");
button.addEventListener("click", () => {
    root.classList.toggle("dark"), root.classList.contains("dark") ? localStorage.setItem("isDark", "1") : localStorage.removeItem("isDark")
});

Referensi : https://emissionhex.blogspot.com

• Results
• Code

Dark Mode V2

Untuk versi Kedua mengunakan metode add data attribute data-theme="dark".

<div class="theme-switch-wrapper">
  <label class="theme-switch" for="checkbox">
    <input type="checkbox" id="checkbox" />
    <div class="slider">
      <svgOfSun />
      <svgOfMoon />
    </div>
  </label>
</div>

:root {
  --bg-color: #fec150;
  --font-color: #222;
  --title-color: #0067e6;
  --title-background: #fff;
  --main-border: 1px solid rgba(255, 255, 255, 0.4);;
  --main-bg: rgba(255, 255, 255, 0.4);;
}
[data-theme="dark"] body {
  background: black;
}
  .theme-switch-wrapper {
  display: flex;
  align-items: center;
}
.theme-switch-wrapper em {
  margin-left: 10px;
  font-size: 1rem;
}
.theme-switch {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px;
}
.theme-switch input {
  display: none;
}
.slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.4s;
  border-radius: 34px;
}
.slider:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 26px;
  left: 4px;
  position: absolute;
  transition: 0.4s;
  width: 26px;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: #fec150;
}
input:checked + .slider:before {
  transform: translateX(26px);
}
.slider svg {
  color: #222;
  position: absolute;
  transition: opacity 0.2s ease 0s, transform 0.35s ease 0s;
  pointer-events: none;
}
.feather-moon {
  opacity: 0;
  left: 9px;
  bottom: 9px;
  transform: translateX(4px);
}
.feather-sun {
  opacity: 1;
  right: 10px;
  bottom: 9px;
  transform: translateX(0px);
}
input:checked + .slider .feather-moon {
  opacity: 1;
  transform: translateX(0);
}
input:checked + .slider .feather-sun {
  opacity: 0;
  transform: translateX(-4px);
}

// Get the theme toggle input
const themeToggle = document.querySelector(
  '.theme-switch input[type="checkbox"]'
);
// Function that will switch the theme based on the if the theme toggle is checked or not
function switchTheme(e) {
  if (e.target.checked) {
    document.documentElement.setAttribute("data-theme", "dark");
  } else {
    document.documentElement.setAttribute("data-theme", "light");
  }
}
// Add an event listener to the theme toggle, which will switch the theme
themeToggle.addEventListener("change", switchTheme, false);


function switchTheme(e) {
  if (e.target.checked) {
    document.documentElement.setAttribute("data-theme", "dark");

    // Set the user's theme preference to dark
    localStorage.setItem("theme", "dark");
  } else {
    document.documentElement.setAttribute("data-theme", "light");

    // Set the user's theme preference to light
    localStorage.setItem("theme", "light");
  }
}

// Get the current theme from local storage
const currentTheme = localStorage.getItem("theme");
// If the current local storage item can be found
if (currentTheme) {
  // Set the body data-theme attribute to match the local storage item
  document.documentElement.setAttribute("data-theme", currentTheme);
// If the current theme is dark, check the theme toggle
  if (currentTheme === "dark") {
    themeToggle.checked = true;
  }
}

Referensi : https://www.thatsanegg.com/blog/create-your-own-dark-mode-using-js-css-variables-and-localstorage