Cara beralih antara Mode Gelap dan Terang di Drupal 8 (atau 9) berdasarkan preferensi pengguna

Betapa hebatnya memberi pengguna Anda kebebasan untuk menyesuaikan antarmuka mereka sesuai preferensi mereka? Sementara banyak pengguna lebih memilih antarmuka terang (latar belakang terang dengan teks gelap), beberapa pengguna memilih antarmuka gelap (latar belakang gelap dengan teks terang). Antarmuka yang lebih gelap dianggap keren dan trendi sementara beberapa juga percaya itu mengurangi ketegangan pada mata terutama bagi pengembang yang menghabiskan banyak waktu di depan layar. Saya percaya bahwa memberikan opsi kepada pengguna Anda adalah kemenangan luar biasa dalam hal aksesibilitas dan pengalaman pengguna. Ada beberapa cara yang dapat digunakan untuk mencapai hal ini. Pada artikel ini, kita akan membahas tentang cara beralih antara mode desain web gelap/terang dan menerapkannya di Drupal 8 atau Drupal 9.

Kami akan fokus pada dua metode untuk menerapkan ini -
1. Hanya menggunakan CSS.
2. Menerapkan sakelar sakelar CSS & JS

Hanya menggunakan CSS

Untuk mencapai mode Gelap di situs web apa pun hanya dengan CSS, seseorang harus mengingat beberapa persyaratan sistem. Salah satu persyaratan penting tersebut adalah mode gelap seluruh sistem . Jika pengguna lebih suka menggunakan mode gelap di PC-nya, maka pengguna akan disuguhi situs web yang menampilkan latar belakang berwarna gelap dengan teks terang di atasnya. Skema warna-pilihan (kueri media) digunakan untuk mengidentifikasi apakah pengguna telah meminta sistem untuk menggunakan tema warna terang atau gelap.

Penerapan:

1. Deklarasikan variabel CSS.
2. Gunakan variabel di mana pun diperlukan.

Hasil:

Catatan: Untuk meniru hasil pada beberapa perangkat yang tidak didukung, cukup masukkan DevTool dengan menekan F12. Selanjutnya tekan CTRL+SHIFT+P, lalu cari prefers-color-scheme: dark dan tekan enter.

Menerapkan sakelar sakelar CSS dan JS

Jika kita menggunakan pendekatan ini, maka kita tidak perlu repot dengan persyaratan sistem. Cukup tulis beberapa baris CSS dan JS dan Anda akan siap. Setelah kita menginisialisasi variabel, kita dapat mereferensikan variabel-variabel ini dalam stylesheet kita. Ini akan menjadi struktur HTML untuk beralih antara mode gelap dan terang.

Dan beberapa baris CSS akan menghasilkan sakelar ini.

Bagian terakhir adalah menambahkan sedikit JavaScript untuk mengikat semuanya.
● Simpan preferensi pengguna untuk kunjungan berikutnya
● Periksa preferensi pengguna yang disimpan, jika ada, saat memuat situs web

Itu dia! Lihat demo lengkapnya di bawah ini.

Atau klik di sini untuk melihat demo.

Menerapkan Toggle Gelap / Terang di Drupal 8 (atau Drupal 9)

Untuk memulai dengan membuat tema Drupal 8 khusus, silakan lihat artikel yang luar biasa di sini. Sekarang mari kita mulai membuat tema untuk menunjukkan cara menggunakan tema gelap/tema terang di Drupal 8 atau Drupal 9.

Struktur file akan terlihat seperti ini:

Sekarang, perbarui bagian header di dalam page.html.twig dengan kode berikut.

 <header aria-label="Site header" role="banner"> <div class="container"> <div class="header"> {{ page.branding }} {{ page.navigation }} <div class="switch-wrapper"> <label class="switch" for="checkbox"> <input type="checkbox"/> <div class="slider round"></div> </label> </div> </div> </div> </header>

Sisa struktur HTML akan tergantung pada desain atau persyaratan Anda.
Setelah Anda selesai dengan struktur HTML, sekarang saatnya untuk membuatnya terlihat bagus dengan menata elemen di CSS.
Pertama, Anda harus membuat semua variabel default yang akan bertanggung jawab atas warna pada mode Terang/Gelap.

 style.css :root { --color-background: #f0f0f0; --color-header: rgb(14, 33, 141); --color-header-text: #aecafa; --color-text: #2c0000; --color-card-bg: #fff; --color-link: rgb(255, 0, 0); } /* Variable decleration for dark mode */ [data-theme="dark"] { --color-background: #1a1a1a; --color-header: #aecafa; --color-header-text: 0e218d; --color-text: #d3d3d3; --color-card-bg: #435561; --color-link: #24ce24; }

Sekarang setelah Anda selesai mendefinisikan variabel, sekarang saatnya menambahkan gaya ke bagian Header untuk mendapatkan hasil yang diinginkan.

 style.css .header { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; background-color: var(--color-header); } .header a { color: var(--color-header-text); text-decoration: none; font-weight: bold; } .region-navigation { display: flex; justify-content: center; } ul.menu { display: flex; justify-content: center; } ul.menu li { margin-right: 30px; } .switch-wrapper { display: flex; align-items: center; } .switch { display: inline-block; height: 34px; position: relative; width: 60px; } .switch input { display: none; } .slider { background-color: white; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; } .slider:before { background-color: rgb(255, 196, 0); bottom: 4px; content: url("../assets/sunny-day.svg"); height: 26px; left: 4px; position: absolute; transition: 0.4s; width: 26px; } input:checked + .slider { background-color: rgb(36, 36, 36); } input:checked + .slider:before { transform: translateX(26px); content: url("../assets/night.svg"); background-color: rgb(59, 116, 223); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }
style.css .header { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; background-color: var(--color-header); } .header a { color: var(--color-header-text); text-decoration: none; font-weight: bold; } .region-navigation { display: flex; justify-content: center; } ul.menu { display: flex; justify-content: center; } ul.menu li { margin-right: 30px; } .switch-wrapper { display: flex; align-items: center; } .switch { display: inline-block; height: 34px; position: relative; width: 60px; } .switch input { display: none; } .slider { background-color: white; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; } .slider:before { background-color: rgb(255, 196, 0); bottom: 4px; content: url("../assets/sunny-day.svg"); height: 26px; left: 4px; position: absolute; transition: 0.4s; width: 26px; } input:checked + .slider { background-color: rgb(36, 36, 36); } input:checked + .slider:before { transform: translateX(26px); content: url("../assets/night.svg"); background-color: rgb(59, 116, 223); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }

Harap dicatat bahwa gaya dapat bervariasi sesuai dengan kebutuhan Anda. Setelah semua penataan, sekarang saatnya untuk menulis beberapa fungsionalitas dalam kode Jquery. Kode Jquery akan terlihat seperti ini (script.js dalam kasus kami)

 script.js (($, Drupal) => { Drupal.behaviors.mainMenu = { attach(context) { const toggleSwitch = document.querySelector( '.switch input[type="checkbox"]' ); const currentTheme = localStorage.getItem("theme"); if (currentTheme) { document.documentElement.setAttribute("data-theme", currentTheme); if (currentTheme === "dark") { toggleSwitch.checked = true; } } function switchTheme(e) { if (e.target.checked) { document.documentElement.setAttribute("data-theme", "dark"); localStorage.setItem("theme", "dark"); } else { document.documentElement.setAttribute("data-theme", "light"); localStorage.setItem("theme", "light"); } } toggleSwitch.addEventListener("change", switchTheme, false); }, }; })(jQuery, Drupal);
script.js (($, Drupal) => { Drupal.behaviors.mainMenu = { attach(context) { const toggleSwitch = document.querySelector( '.switch input[type="checkbox"]' ); const currentTheme = localStorage.getItem("theme"); if (currentTheme) { document.documentElement.setAttribute("data-theme", currentTheme); if (currentTheme === "dark") { toggleSwitch.checked = true; } } function switchTheme(e) { if (e.target.checked) { document.documentElement.setAttribute("data-theme", "dark"); localStorage.setItem("theme", "dark"); } else { document.documentElement.setAttribute("data-theme", "light"); localStorage.setItem("theme", "light"); } } toggleSwitch.addEventListener("change", switchTheme, false); }, }; })(jQuery, Drupal);

Dan jangan lupa untuk menyertakan file JS dan CSS Anda di dalam file theme_name.libraries.yml Anda.

 global-styling: version: 1.x css: theme: css/style.css: {} js: js/script.js: {} dependencies: - core/jquery - core/drupal
global-styling: version: 1.x css: theme: css/style.css: {} js: js/script.js: {} dependencies: - core/jquery - core/drupal

Sekarang bersihkan cache situs untuk melihat hasilnya. Hasil akhir Anda akan terlihat seperti ini: