8 CSS & JavaScript Cuplikan untuk Beralih antara Mode Gelap atau Terang

Desainer web semakin menambahkan beberapa mode kontras ke proyek mereka. Ini memberi pengguna kemampuan untuk melihat situs web dalam skema warna pilihan mereka.

Dalam praktiknya, ini cenderung menghasilkan penawaran mode gelap dan terang. Tapi itu bukan hanya untuk tujuan kosmetik. Kontras memainkan peran besar dalam aksesibilitas. Misalnya, beberapa pengguna tunanetra akan lebih mudah membaca skema warna gelap.

Desainer juga mempertimbangkan preferensi sistem pengguna. Beberapa situs web sekarang akan mendeteksi apakah sistem operasi pengguna diatur untuk menggunakan skema warna gelap atau terang – kemudian menyajikan gaya yang sesuai.

Tetap saja, itu bukan ide yang baik untuk memaksa pengguna ke mode kontras tertentu. Itulah mengapa penting untuk menyediakan cara untuk beralih di antara mereka. Dan fungsi itu adalah fokus kami hari ini.

Berikut adalah delapan cuplikan kode CSS dan JavaScript unik untuk beralih antara mode gelap dan terang.

Tema Terang, Gelap atau Hitam oleh Håvard Brynjulfsen

Panel pengaturan ini menyediakan tiga mode warna yang berbeda dan dirancang dengan indah. Transisi antar mode mulus, memungkinkan perubahan yang tidak terlalu mencolok. Menu ini menggunakan tombol radio HTML yang telah ditata menjadi sakelar sakelar. Ini sederhana, menarik, dan fungsional.

Lihat Pena Tema Terang / Gelap / Hitam oleh Håvard Brynjulfsen

Mode Gelap Mudah dengan SASS oleh Kaio Almeida

Kotak centang sederhana memberi daya pada sakelar mode kontras ini. Dari sana, JavaScript digunakan untuk menambahkan data-theme atribut ke tag HTML halaman. SASS kemudian mencari nilai atribut dan menata konten yang sesuai.

Lihat Pena Mode Gelap Mudah dengan SASS oleh Kaio Almeida

Mode Terang atau Gelap oleh lex

Mengapa tidak bersenang-senang dengan konsep beralih mode kontras? Cuplikan ini menampilkan gambar dan animasi SVG untuk membuat sakelar unik siang-ke-malam. Perhatikan bahwa meskipun menyampaikan pesan secara visual, ini mungkin mendapat manfaat dari beberapa peningkatan aksesibilitas sebelum dimasukkan ke dalam lingkungan produksi.

Lihat Pena Mode Terang / Gelap oleh lex

Pengalih Tema CSS oleh Michelle Barker

Beberapa cuplikan dalam koleksi ini menggunakan JavaScript – tetapi CSS mampu menangani tugas itu sendiri. Contoh ini tidak hanya terlihat bagus tetapi juga mengimplementasikan formulir HTML yang dapat diakses untuk mengaktifkan sakelar mode. Saat Anda membuat fungsionalitas yang dapat digunakan semua orang, ini adalah situasi yang saling menguntungkan.

Lihat Pena Pengalih Tema CSS oleh Michelle Barker

Beralih Mode Gelap GitHub oleh Chintu Yadav Sara

Sementara sakelar besar ini mempertahankan latar belakang putihnya, ia mengubah ikon bersama dengan mode kontras halaman. Perhatikan juga bahwa berbagai bentuk latar belakang berubah menjadi warna neon terang saat dalam mode gelap. Ini menambah kesenangan dan konteks pada presentasi.

Lihat Pena Beralih Mode Gelap GitHub oleh Chintu Yadav Sara

Mode Gelap Persisten oleh Brian Haferkamp

Jika Anda mencari kesederhanaan, tombol mode warna ini akan melakukan pekerjaan itu. Tidak ada ikon mewah (walaupun Anda pasti dapat menambahkannya) atau animasi liar. Hanya satu klik dan beberapa transisi CSS yang mulus. Selain itu, ada sedikit JavaScript berguna yang akan menyimpan preferensi pengguna di penyimpanan lokal.

Lihat Pena Mode Gelap Persisten oleh Brian Haferkamp

Reaktivitas Vue Dasar oleh CodePen

Karena kita melihat lebih banyak UI berbasis JavaScript akhir-akhir ini, sudah sepantasnya kita memiliki contoh seperti itu. Di sini, komponen Vue memungkinkan pengguna mengganti mode kontras melalui kotak centang sederhana. Yang ini memiliki banyak potensi untuk berdandan melalui CSS.

Lihat Pena Reaktivitas Vue Dasar oleh CodePen

Mode Gelap oleh Airen

Untuk proyek yang dapat menggunakan sedikit lebih banyak kreativitas, sakelar bola lampu berayun ini akan memberikan banyak inspirasi. Agar semuanya dapat diakses, gambar bohlam ditempatkan di dalam HTML button elemen. Animasi disediakan melalui CSS. Ini adalah cara yang bagus untuk membumbui portofolio atau blog.

Lihat Pena Mode Gelap oleh Airen

Datang ke Mode Gelap (Atau Terang – Ini Pilihan Anda)

Menambahkan mode kontras warna ke situs web Anda masuk akal dalam beberapa skenario. Ini memungkinkan desainer untuk menawarkan kepada pengguna pilihan estetika mereka sambil juga membuat konten lebih mudah diakses.

Seperti yang ditunjukkan cuplikan di atas, tidak ada kekurangan cara untuk mengimplementasikan fitur ini. CSS memungkinkan opsi gaya yang hampir tak terbatas, sementara JavaScript dapat menyediakan fungsionalitas utama jika diperlukan.

Kami berharap ringkasan ini berfungsi sebagai contoh tentang apa yang mungkin terjadi dalam mode kontras warna. Dan jika Anda ingin melihat lebih banyak cuplikan, lihat kami Koleksi CodePen!

Leave a Comment

Your email address will not be published. Required fields are marked *

Shopping Cart
Select your currency
Scroll to Top