Cara mengimplementasikan mode cahaya atau gelap di CSS

Spesifikasi CSS terus berkembang. Proses untuk mengimplementasikan fitur-fitur baru dalam CSS rumit, tetapi versi yang disederhanakan adalah bahwa kelompok kerja CSS memutuskan pada elemen-elemen baru yang akan ditambahkan ke spesifikasi. Ini kemudian sampai ke browser untuk mengimplementasikan elemen-elemen baru ini, dan browser memilih di mana untuk mengimplementasikannya, itulah sebabnya kami sekarang memiliki ketidakcocokan dukungan untuk fitur-fitur baru. Meskipun ini mungkin menyebalkan kadang-kadang, ini adalah cara yang jauh lebih baik untuk melakukannya daripada browser yang menerapkan spesifikasi penuh, seperti yang kita lihat pada hari-hari awal web. Jika Anda khawatir tentang situs Anda bekerja dengan kemampuan penuh, minta dukungan yang mendukung hosting web. layanan.

Semua ini terdengar seperti terlalu banyak pekerjaan? Menjaga hal-hal sederhana dengan a Pembangun Situs Web .

Kelompok Kerja CSS terdiri dari anggota dari semua vendor peramban utama dan perusahaan teknologi lainnya seperti Apple dan Adobe. Apple, setelah baru-baru ini meluncurkan versi baru MACOS, menginginkan cara untuk mendeteksi mode gelap baru Snazzy di browser. Untuk melakukan ini, Apple mendorong rekomendasi kepada spesifikasi untuk kueri media level 5 baru.

 @Media (SPEMA PREFER-COLOR: LIGHT | DARK)
{...} 

Menggunakan kueri media ini, kita dapat mendeteksi apakah pengguna saat ini menggunakan mode ringan atau gelap di OS. Saat ini ini hanya didukung oleh Pratinjau Teknologi Safari 69 ke atas, tetapi browser lain seharusnya tidak jauh di belakang.

• Panduan Desainer Web untuk Metodologi CSS

Untuk menguji ini, Anda harus ditingkatkan ke Mojave 10.14 (MacOS) dan telah memilih penampilan gelap dalam preferensi sistem. Ada beberapa cara kita dapat menggunakan kueri media baru ini untuk mengimplementasikan tema yang berbeda. Kami akan menjelajahi beberapa dari mereka sekarang dalam tutorial ini.

01. Atur halaman

Untuk memulai, kita perlu membuat beberapa elemen HTML untuk gaya, jadi kita akan mulai dengan membuat pena baru pada codepen dan menambahkan beberapa elemen. Kami akan menambahkan wadah untuk konten kami, untuk memusatkannya, dan beberapa judul dan teks. Kami akan mengatur CSS untuk menggunakan SASS untuk menggunakan bersarang di CSS.

 & lt; div class = "konten-wadah" & gt;
& lt; h1 & gt; tajuk satu & lt; / h1 & gt;
& lt; h2 & gt; judul dua & lt; / h2 & gt;
& lt; hr & gt;
& lt; p & gt; ... & lt; / p & gt;
& lt; p & gt; ... & lt; / p & gt;
& lt; / div & gt; 

02. Gaya elemen dasar

Selanjutnya kami akan menambahkan beberapa gaya dasar dan memasukkan beberapa font dari Google untuk membuat halaman kami terlihat sedikit lebih baik. Kami akan menata semua elemen dasar kami, menerapkan ukuran font baru, warna dan font.

 tubuh {
Font-Family: 'Merriweather', Serif;
latar belakang-warna: #ededed;
Warna: # 212121;
Padding: 1.618REM;
Tinggi garis: 1.618;
Ukuran font: 16px;
} 

03. Wadah Gaya

Selanjutnya kita akan menata wadah kita untuk membuat konten panjang garis yang nyaman untuk dibaca. Kami juga akan menambahkan warna latar belakang dan drop shadow. Untuk memusatkan kotak konten di halaman, kami akan menggunakan kata kunci 'Auto' pada nilai kiri dan kanan margin.

. Kontainer-wadah {
Padding: 1.618REM 3.236REM;
Lebar Maks: 48.54Rem;
MARGIN: 3.236REM AUTO;
Latar Belakang - Warna: #fff;
box-shadow: 0 0 12px 6px rgba (0,0,0,05);
Border-Radius: .269666667rem;
} 

04. Tambahkan warna highlight

Sebagian besar situs web memanfaatkan warna di suatu tempat, dan saat ini kami hanya memiliki kulit putih dan abu-abu, jadi sekarang mari kita pilih warna sorot dan buat gaya untuk menerapkan warna ini. Kami akan menerapkan warna menggunakan tag span, dan akan menggunakannya untuk menyorot sesuatu dalam konten kami.

 & lt; span class = "text - alpha" & gt; lorem ipsum & lt; / span & gt;
.text - alpha {
Warna: # C3423F;
} 

05. Menerapkan permintaan media

Sekarang kami memiliki halaman dengan beberapa gaya dasar, mari kita lihat cara kita dapat menerapkan kueri media. Mari kita sertakan dan mulailah mengesampingkan beberapa gaya kita. Kami akan mulai dengan gaya tubuh.

 @Media (SPEME-COLOR: DARK)
{
tubuh {
Latar Belakang - Warna: # 111;
}
} 

06. Mengesampingkan gaya yang tersisa

Sekarang kita dapat melihat permintaan media berfungsi dan warna latar belakang tubuh kita telah berubah, kita perlu menimpa semua gaya kita yang tersisa.

. Wadah-kontainer
{
warna putih;
Latar Belakang - Warna: # 212121;
}
.text - alpha {
Warna: # 50A8D8;
} 

07. Pemeliharaan

Sementara yang baru saja kami lakukan bekerja dengan sangat baik untuk demo kami dan dapat dipertahankan di situs web yang lebih kecil, metode ini akan menjadi mimpi buruk untuk mengelola proyek yang lebih besar, dengan banyak elemen yang berbeda yang perlu ditarik. Kami juga menggunakan kaskade yang berat dalam contoh kami di atas, sedangkan sistem besar mungkin memerlukan lebih banyak spesifisitas untuk menargetkan semua elemen.

08. Ambil pendekatan lain

Jadi bagaimana kita bisa mengatasi masalah? Mari kita lihat filter CSS. Salah satu nilai yang dapat kita gunakan pada filter CSS adalah 'Invert', jadi kita bisa menerapkan ini ke HTML dan membalikkan semua warna, memberi kita 'mode gelap'.

 @Media (prefer-color-skema: gelap) {
html {
Filter: Balik (100%);
}
} 

09. Tambahkan gambar

Sedangkan metode filter bekerja dengan konten yang kami miliki dalam dokumen kami masih tidak terlihat hebat - bayangan box kami, misalnya, juga terbalik, yang terlihat cukup aneh. Kami telah kehilangan kendali atas gaya, yang menjadi masalah yang lebih besar ketika Anda memiliki latar belakang berwarna. Kami juga memiliki masalah baru untuk dipertimbangkan ketika gambar terlibat. Mari kita lihat apa yang terjadi ketika kita menambahkan gambar ke halaman kita.

10. Gunakan Properti Kustom

Metode yang telah kami jelajahi sejauh ini menyebabkan kami kehilangan kendali atas gaya atau membutuhkan banyak pemeliharaan untuk memastikan semuanya diperbarui dalam mode gelap. Ada cara lain kita dapat mendekati ini: Kita dapat menggunakan properti khusus untuk menentukan warna kita dan kemudian mengesampingkannya menggunakan kueri media.

11. Buat Properti Kustom

Untuk menggunakan properti khusus, kami mendefinisikannya di bagian atas CSS kami di dalam ' :akar Elemen. Elemen akar memiliki ruang lingkup yang sama dengan HTML sehingga akan tersedia secara global. Kita perlu memutuskan nama variabel dan mendefinisikan nilai-nilai mereka.

: root {
--Background-color: #ededed;
--Page-latar belakang: #fff;
--Text-Warna: # 212121;
--Color-Alpha: # C3423F;
} 

12. Terapkan properti khusus kami

Sekarang kami memiliki beberapa sifat khusus yang didefinisikan, kami dapat menggunakannya di CSS kami. Kami akan mulai dengan tubuh dan menerapkan latar belakang dan warna teks. Untuk menggunakan properti khusus, kami menggunakan ' var (- nama properti kustom) Sintaks.

 tubuh {
latar belakang - warna: var (- latar belakang-warna);
Warna: var (- warna teks);
} 

13. Terapkan Sisa Properti

Dengan menggunakan metode yang sama, kami juga dapat memperbarui 'warna latar belakang' dari wadah kami dan 'warna' kami ' Teks-Alpha. 'Kelas untuk menggunakan properti khusus kami. Semua warna di halaman kami sekarang dikontrol menggunakan properti khusus.

. Kontainer-wadah {
latar belakang-warna: var (- latar belakang halaman);
}
.text - alpha {
Warna: var (- warna-alpha);
} 

14. Tambahkan kembali permintaan media

Sekarang kita dapat menambahkan kembali kueri media, tetapi kali ini kita dapat menimpa nilai properti khusus yang ada di dalamnya. Kami akan menempatkan ini tepat setelah definisi root asli, dan di dalam kueri media sekarang kita dapat memilih nilai baru untuk semua sifat kustom warna kita.

 @Media (prefer-color-skema: gelap) {
: root {
--Background-Warna: # 111;
--Page-latar belakang: # 212121;
--Text-Warna: #ededed;
--Color-Alpha: # 50A8D8;
}
} 

15. Ambil kendali penuh

Properti khusus memberi kami kontrol penuh untuk memilih warna apa dan properti lain yang kami ubah dan gunakan. Mari kita perbarui Bayi Bayangan pada wadah halaman kami untuk membuatnya kurang transparan saat menggunakan mode gelap. Untuk melakukan ini, kita perlu membuat properti khusus baru untuk bayangan halaman.

: root {
...
--Page-shadow: 0 0 12px 6px RGBA
(0,0,0,05);
} 

16. Oleskan bayangan

Sekarang kami telah membuat properti khusus lain, kami perlu menerapkannya pada elemen yang benar pada halaman. Kita kemudian dapat mengesampingkan nilai di dalam elemen akar kita untuk mengurangi transparansi.

 @Media (prefer-color-skema: gelap) {
: root {
...
--Page-Shadow:
0 0 12px 6px RGBA (0,0,0,0.33)
;
}
}
.content-wadah {
...
box-shadow: var (- bayangan halaman);
} 

17. Tambahkan gambar

Sekarang mari kita tambahkan gambar kembali ke konten kita, dan kemudian kita dapat menambahkan beberapa gaya dasar untuk mengapung gambar di sebelah konten.

 img {
Lebar: 100%;
Tinggi: otomatis;
float: kiri;
Lebar Max: 300px;
Margin-Right: 1.618REM;
margin-bottom: 1.618REM;
} 

Seperti yang bisa kita lihat, karena kita tidak menggunakan filter apa pun, gambar tidak diubah di antara dua tema.

18. Tambahkan lebih banyak komponen

Sekarang kami memiliki sifat khusus kami, kami dapat terus menambahkan elemen ke halaman dan menata dengan variabel kami. Mari kita buat kelas tombol dan tambahkan tombol ke halaman kami.

 .button {
Tampilan: inline-flex;
Font-Family: Inherit;
latar belakang - warna: var (- warna-alpha);
Warna: var (- warna teks);
Padding: 1.618REM 3.236REM;
batas: 0 tidak ada;
BORDER-RADIUS: 0.25REM;
dekorasi teks: tidak ada;
}

19. Buat tombol hover gaya

Menggunakan variabel yang sama, kita juga dapat membuat gaya hover yang dapat digunakan untuk kedua tema. Untuk mencapai ini, kami akan membalikkan warna ketika pengguna melayang di atas tombol dan mentransisikan properti-properti tersebut untuk membuat pengalaman lebih sedikit menggelegar.

 .button {
...
Transisi: Latar Belakang-warna 150ms,
warna 150 ms;
& amp;: hover {
Latar Belakang - Warna: Var (- Teks-warna);
Warna: var (- warna-alpha);
}
} 

20. Buat Tombol Kustom Properties

Sifat khusus memiliki ruang lingkup yang sama dengan elemen CSS biasa; Ini berarti kita dapat menimpa mereka menggunakan pemilih yang lebih spesifik. Kita dapat memanfaatkan ini dan membuat beberapa variabel yang diletakkan ke tombol kita.

 .button {
--button-latar belakang: var (- warna-alpha);
--Button-Text: var (- latar belakang-warna);
latar belakang - warna: var (- latar belakang tombol);
Warna: var (- teks tombol);
...
} 

21. Memanfaatkan ruang lingkup

Kita dapat memanfaatkan ruang lingkup ini untuk menciptakan gaya yang berbeda dan interaksi untuk tombol kita dalam tema gelap dan ringan. Kita dapat mengubah nilai variabel kita berdasarkan kueri media atau keadaan elemen, alih-alih mengulangi properti dengan nilai baru seperti biasanya.

 .button {
...
& amp;: hover {
- Button-latar belakang: # AE3937;
@ Media (SPEMA PREFER-COLOR: DARG) {
--Button-latar belakang: # 2E98D1;
--button-text: var (- latar belakang-
warna);
}
}
}

Bekerja pada bangunan dengan tim? Jaga agar proses Anda tetap kohesif penyimpanan awan .

Artikel ini awalnya diterbitkan dalam edisi 283 dari Majalah Desain Web Kreatif Desainer web . Beli Masalah 283. atau berlangganan desainer web di sini .

Artikel terkait:

• Mulailah dengan CSS Art
• 12 Sumber Daya Animasi CSS Great
• Apa kerangka kerja CSS yang harus Anda gunakan?