Cara Melaraskan Warna Secara Automatik dalam Mod Kontras Tinggi

pengenalan

Baru-baru ini saya menerima laporan pepijat yang menunjukkan ikon SVG tidak dipaparkan dengan betul dalam mod kontras tinggi. Dalam artikel ini, saya akan berkongsi penyelesaian yang berkesan untuk saya.

Penyelesaian

Dalam mod kontras tinggi, saya menggunakan warna sistem CanvasText untuk melaraskan warna ikon secara automatik.

.icon {
  mask-image: url(svg-link);
  background-color: currentColor;
  ...
}

@media (forced-colors: active) {
  .icon::before {
    background-color: CanvasText;
  }
}

Dalam kes saya, saya pada mulanya menggunakan currentColor untuk mewarisi warna daripada elemen induk. Walau bagaimanapun, dalam mod kontras tinggi, saya ingin menetapkan warna latar belakang kepada CanvasText secara universal dalam elemen kanak-kanak, jadi saya menggunakan perubahan ini.

Apakah itu CanvasText?

CanvasText merujuk kepada warna teks yang digunakan untuk kandungan aplikasi atau dokumen. Ia melaraskan secara automatik untuk memberikan kontras terbaik terhadap warna latar belakang sistem.

Dengan menggunakan CanvasText, anda memastikan teks dan ikon kekal kelihatan walaupun apabila pengguna mendayakan mod kontras tinggi. Selain itu, memandangkan CanvasText menyesuaikan diri berdasarkan tema sistem, ia berfungsi dengan baik dengan kedua-dua mod gelap dan terang.

Dalam kes saya, warna latar belakang ikon pada mulanya ditetapkan kepada hitam. Walau bagaimanapun, apabila latar belakang menjadi hitam dalam mod kontras tinggi, ikon menjadi tidak kelihatan. Menukar warna kepada putih menjadikannya kelihatan semula, tetapi untuk mengendalikan perkara ini secara konsisten merentas semua senario, saya memilih untuk menggunakan warna sistem CanvasText.

Rujukan

https://developer.mozilla.org/en-US/docs/Web/CSS/system-color

Atas ialah kandungan terperinci Cara Melaraskan Warna Secara Automatik dalam Mod Kontras Tinggi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!