
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
<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
Komentar
Untuk Tutorial Pemasangan License bisa gunakan <i rel='Tutor1'>Tutor</i>
Untuk Cek Member bisa gunakan <i rel='CekMember'>Cek Member</i>
Untuk Menyisipkan Gambar bisa gunakan <i rel='img'>URL_IMAGE</i>
Untuk Menyisipkan Video/Iframe bisa gunakan <i rel='video'>URL_video</i>
Untuk Menyisipkan syntax highlighter bisa gunakan <i rel='kode'>Kode yang sudah di parse</i>