Datang ke sisi cahaya ()

Membuat kedua -dua mod cahaya dan gelap pada masa yang sama mungkin kelihatan menakutkan. Menguruskan pertanyaan

berdasarkan @media, menampung pengguna mengatasi tetapan OS, dan mencipta palet warna yang berbeza untuk kebolehcapaian semua menambah kerumitan. Tetapi CSS moden memudahkan ini dengan ketara. prefers-color-scheme

memanfaatkan skim warna HTML asli

HTML menawarkan kedua-dua warna hitam-putih dan tema putih-hitam (walaupun sering disembunyikan oleh CSS Resets). Tema putih-hitam menyediakan asas yang sangat baik untuk mod gelap, meminimumkan keperluan untuk pelarasan manual kepada unsur-unsur seperti input dan butang.

skema warna automatik beralih melalui pilihan OS

tanpa sebarang pertanyaan

, hanya mengisytiharkan @media pada elemen akar membolehkan penukaran automatik berdasarkan pilihan OS pengguna. Pelayar menghormati "cahaya" OS, "gelap," atau "auto" tetapan skema warna. Ini juga boleh dicapai melalui tag HTML color-scheme: light dark;: <meta>. Kedua -dua kaedah ini mencapai hasil yang sama: menjadikan kedua -dua skim cahaya dan gelap tersedia dan memohon yang sesuai. <meta content="light dark" name="color-scheme">

anda boleh mengawal harta

atau harta CSS dengan JavaScript. Memohon <meta> kepada unsur -unsur individu juga mungkin, tetapi memerlukan pengisytiharan eksplisit color-scheme dan color sifat untuk mengelakkan isu -isu warisan. background-color

teks lalai dan pembolehubah warna latar belakang

lalai "hitam" dan "putih" dalam tema-tema ini sering sedikit di luar hitam dan luar putih, memperbaiki kontras. Warna -warna ini boleh diakses sebagai

pembolehubah: <system-color></system-color> (latar belakang) dan Canvas (teks). Pembolehubah ini secara automatik menyesuaikan dengan perubahan CanvasText, berkelakuan sama dengan color-scheme, tetapi currentColor tetap tetap sebagai warna teks lalai. CanvasText

Contoh -contoh berikut menunjukkan kesan menukar harta

: color-scheme

Terdapat banyak pembolehubah lain

(19 secara keseluruhan). MDN menyediakan senarai lengkap. Walau bagaimanapun, penyemak imbas dan OS tidak konsisten wujud dalam rendering dan sokongan mereka. Rangka kerja Egor Kloos mengesan status semasa pembolehubah ini. <system-color></system-color> system.css mengisytiharkan warna untuk kedua -dua mod

Dengan cahaya automatik/beralih gelap di tempat, kaedah optimum untuk mengisytiharkan warna menjadi penting. Berikut adalah tiga pendekatan, disenaraikan dari yang paling sedikit ke yang paling berkesan:

3. Pendekatan berasaskan Opacity:

Menggunakan kelegapan warna (mis.,

) membolehkan warna

ditunjukkan, tetapi kurang berkesan untuk teks dan menghasilkan warna yang disenyapkan. rgb(128 0 0 / 0.5)

2. color-mix() Fungsi:

fungsi color-mix() membolehkan warna pencampuran dengan perkadaran yang ditentukan (mis., ). Ini berguna untuk mengekalkan konsistensi warna dan tepu di seluruh mod. Ruang warna Oklab dan Oklch menawarkan kawalan ringan dan ketepuan yang lebih baik berbanding dengan HSL. color-mix(in oklab, Canvas 75%, RebeccaPurple)

1.

Fungsi: light-dark()

fungsi

(mis., light-dark()) menawarkan kawalan yang paling tepat, yang membolehkan warna yang sama sekali berbeza dalam mod cahaya dan gelap. Ia juga boleh menggabungkan light-dark(lavender, saddlebrown). Sokongan penyemak imbas adalah tinggi tetapi sandaran mungkin diperlukan. color-mix()

kelebihan

dan color-scheme over light-dark() pertanyaan @media

menawarkan beberapa kelebihan lebih dari color-scheme: @media prefers-color-scheme

menyediakan mod gelap asas dengan mudah. ​​
mengendalikan beralih berasaskan keutamaan OS secara asli.
membolehkan toggling berasaskan JavaScript sambil menghormati warna yang diisytiharkan.

Melaksanakan kawalan mod cahaya, gelap, dan automatik

Menawarkan mod cahaya, gelap, dan auto memberikan fleksibiliti. Mod auto lalai ke tetapan OS, sementara pengguna boleh beralih secara manual. Ini menghapuskan keperluan logik pengesanan kompleks dan pendengar acara.

Pelarasan Skema Warna Berasaskan CSS

Pelarasan CSS tulen mungkin menggunakan

pseudo-selector dan input radio atau :has() elemen. Walau bagaimanapun, ini terhad kepada perubahan per-halaman dan memerlukan <select></select> sokongan. :has()

Pelarasan Skema Warna Berasaskan JavaScript

JavaScript berguna untuk tetapan berterusan dan interaksi pengguna. Tag

atau <meta> boleh digunakan untuk memanipulasi html.style.setProperty(). Fungsi meningkatkan kebolehgunaan semula kod. color-scheme

Mengingati Keutamaan Pengguna

API Penyimpanan Web (LocalStorage atau SessionStorage) membolehkan menyimpan keutamaan pengguna untuk lawatan masa depan.

berterusan merentasi sesi, manakala localStorage dibersihkan pada penutupan pelayar. Pilihan bergantung kepada tingkah laku pengguna dan pertimbangan pematuhan GDPR. sessionStorage

Pertimbangan Kebolehcapaian

Menyediakan kedua -dua mod cahaya dan gelap meningkatkan kebolehcapaian. Pertimbangkan untuk menambah tetapan kontras (menggunakan

dan prefers-contrast) untuk penyesuaian selanjutnya. Gunakan atribut Aria (mis., filter: contrast()) Secara seimbang untuk keserasian pembaca skrin yang dipertingkatkan. aria-pressed Kesimpulannya, CSS moden memudahkan penciptaan mod cahaya dan gelap. Merangkul fleksibiliti dan pilihan pengguna yang ditawarkan oleh

,

, dan penyimpanan keutamaan pengguna. color-scheme

Atas ialah kandungan terperinci Datang ke sisi cahaya (). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!