Slider Widget

Responsive Ad

Membuat Dark/Light Mode dengan CSS oleh - seputarcss.xyz

Halo sahabat selamat datang di website seputarcss.xyz, pada kesempatan hari ini kita akan membahas seputar Membuat Dark/Light Mode dengan CSS oleh - seputarcss.xyz, kami sudah mempersiapkan artikel tersebut dengan informatif dan akurat, silahkan membaca

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.

Enable Dark Mode!
.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.

Itulah tadi informasi dari poker idn mengenai Membuat Dark/Light Mode dengan CSS oleh - seputarcss.xyz dan sekianlah artikel dari kami seputarcss.xyz, sampai jumpa di postingan berikutnya. selamat membaca.

Post a Comment

0 Comments