CSS Özel Özellikleri ile Hızlı ve Kolay Karanlık Modu

Faydalı Alternatif Metin Yazma

Bir web sitesine veya uygulamaya “karanlık mod” desteği eklemek, çoğu bu ayarı kendileri tercih eden geliştiriciler arasında giderek daha popüler hale geliyor. Bazı insanlar aşırı parlak ekranlardan dolayı baş ağrısı veya görsel zorluklar yaşadığından veya açık renkli bir arka planda uzun süre okumada sorun yaşadıklarından, kullanıcılara karanlık bir tema seçeneği sunmak erişilebilirlik açısından faydalı olabilir.

Medya sorguları

sayesinde seviye 5 Medya Sorguları belirtimi, onu tercih eden kullanıcılar için kodunuzda karanlık mod stilleri uygulamak nispeten basittir. kullanarak prefers-colour-scheme medya sorgusu, sistem ayarlarında koyu renk şeması tercihi seçen kullanıcılar için web sitemizin nasıl görüneceğini belirleyebiliriz:

@media (prefers-color-scheme: dark) {
/* Dark mode styles go here! */
}

Alternatif olarak, diğer yoldan gidebilir ve varsayılan olarak koyu mod stillerini uygulayabilir, ardından özellikle açık renk şeması seçen veya tercihi olmayan kullanıcılar için bunları geçersiz kılabiliriz.

@media (prefers-color-scheme: light) {
/* Light styles */
}

@media (prefers-color-scheme: no-preference) {
/* Styles */
}

Açıkçası yine de CSS stillerinizi yazma zahmetine girmeniz gerekiyor!

Yakın zamanda bu web sitesinde karanlık modu uygulamaya karar verdim ve CSS özel özellikleri sayesinde bunu oldukça hızlı ve acısız bir şekilde yapabildim.

Özel özellikler için SCSS değişkenlerini değiştirme

Karanlık modu uygulamanın ilk adımı, Sass değişkenleri yerine herhangi bir renk için özel özellikleri kullanmak için kodumu yeniden düzenlemekti. Tuhaf bir şekilde, bu en zor kısımdı, çünkü değişkenleri yeniden adlandırmayı gerektiriyor – nedenler yakında netleşecek! Birincil veya marka rengini yeniden düzenlemek oldukça basittir:

$primary: deeppink;

Olur:

:root {
--primary: deeppink;
}

Ama diğerleri biraz daha düşünmeyi gerektiriyordu. Böyle bir değişken $bg-light, sitenin açık renkli arka planının rengini tanımladı. Karanlık modu uygulamak için, aynı değişken adını kullanarak arka plan rengini daha koyu bir renkle değiştirebilmemiz gerekir – artık onu çağırmak mantıklı değil --bgLight temsil ettiği renk açık olmadığında!

Üç ana arka plan rengim var, bu yüzden aşağıdakilere karar verdim:

:root {
--primary: deepPink;
--headerBg: #1d1d26;
--textColor: #0e0f0f;
--textColorInverse: #fcfdff;
--bg: #fcfdff;
--bgTint: #dfeded;
--bgGrey: #e6e8e8;
--white: #fcfdff;
}

Bu, değişkenlerin yeniden kullanılabilirliğini en üst düzeye çıkarırken, neyi temsil ettiklerini de açık hale getirir.

Karanlık mod için değişkenleri yeniden tanımlama

Bundan sonra yapmam gereken tek şey koyu renk şeması için değişkenleri yeniden tanımlamak. Başlık arka planı gibi bazı değişkenler ve --primary renk, hiç değiştirmeniz gerekmez ve renk paletinin geri kalanı oldukça sınırlıdır. Bu yüzden sadece karanlık tema için güncellenmesi gereken birkaç özel özelliğim vardı:

:root {
--primary: deepPink;
--headerBg: #1d1d26;
--textColor: #0e0f0f;
--textColorInverse: #fcfdff;
--bg: #fcfdff;
--bgTint: #dfeded;
--bgGrey: #e6e8e8;
--white: #fcfdff;
}

@media (prefers-color-scheme: dark) {
:root {
--bg: #161618;
--bgTint: #27272c;
--textColor: #dbd7db;
--bgGrey: #27272c;
--textColorInverse: #0e0f0f;
}
}

Karanlık temayı uygulamak için gereken kod tam anlamıyla bu kadar! Temayı test etmek için sistem ayarlarıma girip renk tercihlerimi “koyu” olarak değiştirebilirim. Mac’te altında bulunurlar Sistem Tercihleri ​​> Genel > Görünüm.

Sonraki adımlar

Şu anda, web sitesinin kullanıcıları sistem tercihlerini “karanlık” olarak ayarladıklarından oluşan karanlık temayı alacaklar, ancak bunu değiştiremeyecekler – en azından sistem ayarlarına geri dönmeden, ki bu son derece pratiktir. . Bu ideal değildir, çünkü bazı kullanıcılar genel olarak karanlık modu tercih edebilir, ancak belirli bir web sitesinin açık renk düzenini tercih edebilir. Açıkça kullanıcılara bir seçenek sunmak tercih edilir.

Andy Bell kullanıcının tercihlerini saklamak için localStorage kullanarak tercih ettiği renk şemasını seçmesine olanak tanıyan bir geçişin nasıl ekleneceği hakkında harika bir makale yazdı. Çok yakında uygulamak istediğim bir şey.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.