Pendekatan yang kering untuk tema warna dalam CSS

Baru -baru ini, Florens Verschelde bertanya bagaimana untuk menentukan gaya mod gelap dalam pertanyaan kelas dan media sambil mengelakkan pengisytiharan berulang CSS Custom Custom. Saya juga menghadapi masalah ini pada masa lalu, tetapi tidak menemui penyelesaian yang sesuai.

Matlamat kami adalah untuk mengelakkan mentakrifkan semula -dan dengan itu mengulangi -kesusasteraan sifat apabila menukar cahaya dan mod gelap. Ini adalah matlamat pengaturcaraan kering (jangan ulangi diri anda), tetapi corak tipikal topik penukaran biasanya seperti ini:

 <code>:root { --background: #fff; --text-color: #0f1031; /* etc. */ } @media (prefers-color-scheme: dark) { :root { --background: #0f1031; --text-color: #fff; /* etc. */ } }</code>

Adakah anda faham maksud saya? Sudah tentu, ia mungkin tidak kelihatan penting dalam contoh pendek ini, tetapi bayangkan berurusan dengan berpuluh -puluh sifat tersuai sekaligus - ia banyak pengulangan!

Kemudian saya teringat silap mata menggunakan --var: ; , dan walaupun saya tidak memikirkannya pada mulanya, saya dapati cara untuk membuatnya berfungsi: bukannya menggunakan var(--light-value, var(--dark-value)) atau kombinasi bersarang yang serupa, gunakannya bersebelahan!

Sudah tentu, mesti ada seseorang yang menemui ini di hadapan saya, tetapi saya tidak pernah mendengar menggunakan (atau sebaliknya, disalahgunakan) sifat adat CSS untuk mencapai matlamat ini. Tanpa berlengah lagi, inilah idea:

 <code>--color: var(--light, orchid) var(--dark, rebeccapurple);</code>

Jika nilai --light ditetapkan pada initial , nilai sandaran (orkid) akan digunakan, yang bermaksud bahawa --dark harus ditetapkan ke aksara ruang (ini adalah nilai yang sah), menjadikan nilai akhir yang dikira kelihatan seperti ini:

 <code>--color: orchid ; /* 注意额外的空格*/</code>

Sebaliknya, jika --light ditetapkan ke ruang dan --dark ditetapkan pada initial , kita berakhir dengan nilai yang dikira sebagai:

 <code>--color: rebeccapurple; /* 同样，注意空格*/</code>

Sekarang, ini baik -baik saja, tetapi kita perlu menentukan sifat -sifat tersuai --light dan --dark konteks. Pengguna boleh menetapkan keutamaan sistem (cahaya atau gelap), atau menggunakan elemen UI tertentu untuk menukar tema laman web. Sama seperti contoh Florens, kami akan menentukan tiga kes ini dan menggunakan pemalar Lea "On" dan "off" Lea untuk beberapa peningkatan pembacaan kecil untuk membuatnya jelas sekilas:

 <code>:root { /* 感谢Lea Verou！*/ --ON: initial; --OFF: ; } /* 默认情况下，浅色主题处于启用状态*/ .theme-default, .theme-light { --light: var(--ON); --dark: var(--OFF); } /* 默认情况下，暗色主题处于禁用状态*/ .theme-dark { --light: var(--OFF); --dark: var(--ON); } /* 如果用户偏好暗色，那么他们将获得暗色主题*/ @media (prefers-color-scheme: dark) { .theme-default { --light: var(--OFF); --dark: var(--ON); } }</code>

Kita kemudian boleh menetapkan semua pembolehubah topik dalam satu perisytiharan tanpa pertindihan. Dalam contoh ini, kelas theme-* ditetapkan kepada elemen html , jadi kita boleh menggunakan :root sebagai pemilih, sama seperti ramai orang suka lakukan, tetapi jika sifat-sifat cascading sifat tersuai lebih masuk akal, anda juga boleh menetapkannya ke body .

 <code>:root { --text: var(--light, black) var(--dark, white); --bg: var(--light, orchid) var(--dark, rebeccapurple); }</code>

Untuk menggunakannya, kami menggunakan var() dan sandaran terbina dalam kerana kami ingin berhati-hati:

 <code>body { color: var(--text, navy); background-color: var(--bg, lightgray); }</code>

Semoga anda mula melihat manfaat di sini. Daripada mendefinisikan dan menukar sejumlah besar sifat tersuai, kami memproses dua sifat dan menetapkan semua sifat lain hanya sekali :root . Ini adalah peningkatan yang besar dari tempat kami bermula.

Melaksanakan lebih banyak kod kering menggunakan preprocessor

Sekiranya saya melihat baris kod berikut dari konteks, saya pasti akan dikelirukan kerana warna adalah satu nilai, bukan dua!

 <code>--text: var(--light, black) var(--dark, white);</code>

Itulah sebabnya saya lebih suka menjadi abstrak sedikit. Kami boleh menyediakan fungsi menggunakan preprocessor kegemaran kami (sass dalam kes saya). Jika kita menyimpan kod dengan nilai --light dan --dark -nilai yang ditakrifkan di atas dalam konteks yang berbeza, kita hanya perlu mengubah perisytiharan atribut adat sebenar. Mari buat fungsi light-dark yang mengembalikan sintaks CSS:

 @Function light-dark ($ cahaya, $ gelap) {
  @return var (-cahaya, #{$ light}) var (-gelap, #{$ gelap});
}

Kami akan menggunakannya seperti ini:

 : root {
   --text: #{light-dark (hitam, putih)};
   --bg: #{light-dark (orchid, rebeccapurple)};
   -Akal: #{light-dark ( #6d386b, #b399cc)};
}

Anda akan melihat bahawa terdapat pemisah interpolasi #{ … } di sekitar panggilan fungsi. Tanpa ini, SASS akan mengeluarkan kod seperti (seperti fungsi CSS biasa). Anda boleh mencuba pelbagai pelaksanaan, tetapi kerumitan sintaks bergantung pada pilihan anda.

Bagaimanakah ini mencari asas kod yang lebih kering?

Lebih daripada satu topik? Tiada masalah!

Anda boleh melakukan ini dengan lebih daripada dua mod. Semakin banyak topik yang anda tambah, semakin kompleks ia akan mengurus, tetapi kunci adalah bahawa ini mungkin ! Kami menambah satu lagi kumpulan topik pembolehubah ON atau OFF dan menetapkan pembolehubah tambahan dalam senarai nilai.

 <code>.theme-pride { --light: var(--OFF); --dark: var(--OFF); --pride: var(--ON); } :root { --text: var(--light, black) var(--dark, white) var(--pride, #ff8c00) ; /* 换行符是完全有效的*/ /* 其他要声明的变量… */ }</code>

Adakah ini kemahiran? Ya, betul -betul. Adakah ini kes penggunaan yang baik untuk booleans CSS yang berpotensi, tidak wujud? Ok, ini adalah mimpi.

Dan awak? Adakah anda telah menyelesaikan masalah ini dengan cara yang berbeza? Sila kongsi dalam komen!

Atas ialah kandungan terperinci Pendekatan yang kering untuk tema warna dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!