Mode gelap telah menjadi preferensi populer, jadi Anda harus mendukungnya di situs dan aplikasi web Anda.

Dalam beberapa tahun terakhir, mode gelap telah mendapatkan popularitas yang signifikan sebagai opsi antarmuka pengguna. Ini menawarkan latar belakang yang lebih gelap dilengkapi dengan teks yang lebih terang, yang tidak hanya mengurangi ketegangan mata tetapi juga menghemat masa pakai baterai, terutama pada layar OLED.

Temukan bagaimana Anda dapat menambahkan opsi mode gelap ke situs web dan aplikasi web Anda, menggunakan kombinasi CSS dan JavaScript.

Memahami Mode Gelap

Mode gelap adalah skema warna alternatif untuk situs web Anda yang menukar latar belakang terang tradisional dengan latar gelap. Itu membuat halaman Anda lebih enak dilihat, terutama dalam kondisi cahaya redup. Mode gelap telah menjadi fitur standar di banyak situs web dan aplikasi karena sifatnya yang ramah pengguna.

Menyiapkan Proyek Anda

Sebelum Anda menerapkan ini, pastikan Anda telah menyiapkan proyek dan siap untuk dikerjakan. Anda harus mengatur file HTML, CSS, dan JavaScript secara terstruktur.

instagram viewer

Kode HTML

Mulailah dengan markup berikut untuk konten halaman Anda. Pengunjung akan dapat menggunakan tema__switcher elemen untuk beralih antara mode gelap dan terang.

<body>
<navclass="navbar">
<spanclass="logo">Company Logospan>
<ulclass="nav__lists">
<li>Aboutli>
<li>Blogli>
<li>Contactli>
ul>


<divid="theme__switcher">
<imgid="theme__image"src="./toggle.svg"alt="" />
div>
nav>


<main>
 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Odit deserunt sit neque in labore quis quisquam expedita minus
 perferendis.
main>
<scriptsrc="./script.js">script>
body>

Kode CSS

Tambahkan CSS berikut untuk memberi gaya pada contoh. Ini akan bertindak sebagai mode terang default yang nantinya akan Anda tambahkan dengan gaya baru untuk tampilan mode gelap.

@import url("https://fonts.googleapis.com/css2?family=Quicksand: wght@400;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


html { font-size: 62.5%; }


body { font-family: "Quicksand", sans-serif; }


.navbar {
display: flex;
padding: 2rem;
font-size: 1.6rem;
align-items: center;
color: rgb(176, 58, 46);
background-color: #fdedec;
}


.navbarspan { margin-right: auto; }


.logo { font-weight: 700; }


.nav__lists {
display: flex;
list-style: none;
column-gap: 2rem;
margin: 0 2rem;
}


#theme__switcher { cursor: pointer; }


main {
width: 300px;
margin: 5remauto;
font-size: 2rem;
line-height: 2;
padding: 1rem 2rem;
border-radius: 10px;
box-shadow: 2px 3.5px 5pxrgba(242, 215, 213, 0.4);
}

Saat ini, antarmuka Anda akan terlihat seperti ini:

Menerapkan Mode Gelap Menggunakan CSS dan JavaScript

Untuk menerapkan mode gelap, Anda akan menentukan tampilannya menggunakan CSS. Anda kemudian akan menggunakan JavaScript untuk menangani peralihan antara mode gelap dan terang.

Membuat Kelas Tema

Gunakan satu kelas untuk setiap tema sehingga Anda dapat dengan mudah beralih di antara dua mode tersebut. Untuk proyek yang lebih lengkap, Anda harus mempertimbangkan caranya mode gelap dapat memengaruhi setiap aspek desain Anda.

.dark {
background: #1f1f1f;
color: #fff;
}
.light {
background: #fff;
color: #333;
}

Memilih Elemen Interaktif

Tambahkan JavaScript berikut ke file skrip.js mengajukan. Bit kode pertama cukup memilih elemen yang akan Anda gunakan untuk menangani peralihan.

// Get a reference to the theme switcher element and the document body
const themeToggle = document.getElementById("theme__switcher");
const bodyEl = document.body;

Menambahkan Fungsi Toggle

Selanjutnya, gunakan JavaScript berikut untuk beralih antara mode cahaya (lampu) dan mode gelap (gelap) kelas. Perhatikan bahwa ada baiknya juga mengubah sakelar sakelar untuk menunjukkan mode saat ini. Kode ini melakukannya dengan penyaring CSS.

// Function to set the theme
functionsetTheme(theme) {
// If the theme is "dark," add the "dark" class, remove "light" class,
// and adjust filter style
 bodyEl.classList.toggle("dark", theme "dark");


// If the theme is "light," add the "light" class, remove "dark" class,
 bodyEl.classList.toggle("light", theme !== "dark");


// adjust filter of the toggle switch
 themeToggle.style.filter = theme "dark"? "invert(75%)": "none";
}


// Function to toggle the theme between light and dark


functiontoggleTheme() {
 setTheme(bodyEl.classList.contains("dark")? "light": "dark");
}


themeToggle.addEventListener("click", toggleTheme);

Ini membuat halaman Anda mengubah tema dengan mengklik wadah sakelar.

Meningkatkan Mode Gelap Dengan JavaScript

Pertimbangkan dua peningkatan berikut yang dapat membuat situs mode gelap Anda lebih nyaman digunakan oleh pengunjung Anda.

Mendeteksi Preferensi Pengguna

Ini melibatkan pemeriksaan tema sistem pengguna sebelum situs web dimuat dan menyesuaikan situs Anda agar sesuai. Inilah cara Anda melakukannya menggunakan pertandinganMedia fungsi:

// Function to detect user's preferred theme
functiondetectPreferredTheme() {
// Check if the user prefers a dark color scheme using media queries
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
 setTheme(prefersDarkMode);
}


// Run the function to detect the user's preferred theme
detectPreferredTheme();

Sekarang, setiap pengguna yang mengunjungi situs Anda akan melihat desain yang sesuai dengan tema perangkat mereka saat ini.

Preferensi Pengguna yang Bertahan Dengan Penyimpanan Lokal

Untuk meningkatkan pengalaman pengguna lebih lanjut, menggunakan penyimpanan lokal untuk mengingat mode yang dipilih pengguna di seluruh sesi. Hal ini memastikan bahwa mereka tidak perlu berulang kali memilih mode pilihan mereka.

functionsetTheme(theme) {
 bodyEl.classList.toggle("dark", theme "dark");
 bodyEl.classList.toggle("light", theme !== "dark");
 themeToggle.style.filter = theme "dark"? "invert(75%)": "none";


// Setting the theme in local storage
 localStorage.setItem("theme", theme);
}


// Check if the theme is stored in local storage


const storedTheme = localStorage.getItem("theme");


if (storedTheme) {
 setTheme(storedTheme);
}


functiondetectPreferredTheme() {
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;


// Getting the value from local storage
const storedTheme = localStorage.getItem("theme");
 setTheme(prefersDarkMode && storedTheme !== "light"? "dark": "light");
}

Merangkul Desain yang Berpusat pada Pengguna

Mode gelap lebih dari sekadar penampilan; ini tentang mengutamakan kenyamanan dan preferensi pengguna. Dengan mengikuti pendekatan ini, Anda dapat membuat antarmuka yang ramah pengguna dan mendorong kunjungan berulang. Saat Anda membuat kode dan mendesain, prioritaskan kesejahteraan pengguna, dan berikan pengalaman digital yang lebih baik bagi pembaca Anda.