Membuat Dark/Light Mode dengan CSS

Membuat Dark/Light Mode dengan CSS – Memberi pengguna penyesuaian interface dengan preferensi mereka adalah kemenangan besar bagi pengalaman pengguna. Di sini kami akan memberikan switcher sederhana untuk berpindah antara mode gelap dan mode cahaya (dark/light mode).

Mari kita mulai!

Membuat Dark/Light Mode dengan CSS

Jika kamu belum situs web sendiri untuk menggunakan fungsionalitas ini, gunakan situs web demo ini untuk mengikuti.

Baca juga: Codepen, Tempat Bermain Frontend Developer

See the Pen Demo Page by Abay (@abaykan) on CodePen.

Tambahan Sentuhan CSS

Kita akan menambahkan custom-property CSS yang juga dikenal sebagai variabel CSS, yang dapat kita rujuk dan modifikasi di seluruh dokumen. Kalau kamu ingin membaca lebih lanjut tentang custom-property, kamu bisa membaca di MDN.

Pertama, kita akan menambahkan variabel css mode cahaya atau standar ke psuedo-class :root. Kita menggunakan :root karena akan memanfaatkan variabel tersebut secara global.

:root {
    --primary-color: #302AE6;
    --secondary-color: #536390;
    --font-color: #424242;
    --bg-color: #fff;
    --heading-color: #292922;
}

Kedua, kita akan menambahkan variabel css untuk versi gelap (dark).

[data-theme="dark"] {
    --primary-color: #9A97F3;
    --secondary-color: #818cab;
    --font-color: #e1e1ff;
    --bg-color: #161625;
    --heading-color: #818cab;
}

Apa itu [data-theme="dark"]? Ini berarti kita mereferensikan atribut data yang disebut data-theme dengan nilai “dark”. Kita akan melihat contoh penggunaannya sebentar lagi.

Selanjutnya, kita bisa mereferensikan variabel-variabel ini dalam stylesheet kita seperti:

body {
    background-color: var(--bg-color);
    color: var(--font-color);

    /*styles tambahan*/
    .....
}

h1 {
    color: var(--secondary-color);

    /*styles tambahan*/
    .....
}

a {
    color: var(--primary-color);

    /*styles tambahan*/
    .....
}

Menambahkan HTML “toggle switch markup”

Pada dasarnya ini hanya kotak centang, tapi akan menambahkan beberapa markup tambahan ke styke agar terlihat seperti sakelar. Saya terinspirasi dari sini.

<div class="theme-switch-wrapper">
    <label class="theme-switch" for="checkbox">
        <input type="checkbox" id="checkbox" />
        <div class="slider round"></div>
  </label>
  <em>Enable Dark Mode!</em>
</div>

.theme-switch-wrapper {
  display: flex;
  align-items: center;

  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: .4s;
}

.slider:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 26px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 26px;
}

input:checked + .slider {
  background-color: #66bb6a;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

Menambahkan Javascript

Bagian terakhir adalah menambahkan sedikit JavaScript untuk menyatukan semuanya. Yang harus kita lakukan adalah:

• Tambahkan event handler untuk menangani centang / hapus centang di toggle-switch.
• Simpan preferensi pengguna untuk kunjungan selanjutnya.
• Periksa preferensi pengguna yang disimpan.

Menambahkan Event Handlers

const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
    }
    else {
        document.documentElement.setAttribute('data-theme', 'light');
    }    
}

toggleSwitch.addEventListener('change', switchTheme, false);

Simpan preferensi Pengguna untuk kunjungan selanjutnya

Kita akan menggunakan local storage browser untuk menyimpan preferensi pengguna. Mari kita modifikasi fungsi switchTheme kita.

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark'); //add this
    }
    else {
        document.documentElement.setAttribute('data-theme', 'light');
        localStorage.setItem('theme', 'light'); //add this
    }    
}

Periksa preferensi pengguna yang disimpan, jika ada, saat memuat situs web:

• Atur atribut data-theme.
• Centang / hapus centang pada kotak toggle-switch.

const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;

if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);

    if (currentTheme === 'dark') {
        toggleSwitch.checked = true;
    }
}

Selesai! Coba lihat demo di bawah ini!

See the Pen Dark/Light Mode Switch with CSS Variables by Abay (@abaykan) on CodePen.

Thumbnail: Oleg Frolov.