Tema Değiştirme için CSS Değişkenleri

:root üzerinde tanımlanan CSS özel özellikleri (değişkenler), stil sayfasının tamamında kullanılabilir. Eksiksiz bir renk paletini (arka planlar, metin renkleri, yüzeyler, kenarlıklar) bir kez tanımlayıp her yerde kullanırsınız. Bu tek doğruluk kaynağı, tema değiştirmeyi çok kolaylaştırır.

data-theme="dark" özniteliği document.documentElement üzerinde ayarlandığında, [data-theme='dark'] gibi bir CSS seçicisi kök değişkenleri koyu değerlerle geçersiz kılar. Bileşenler var(--color-bg) başvurularını kullanır ve herhangi bir kod değişikliği olmadan yeni değerleri otomatik olarak alır.

En azından şunları tanımlayın: --color-bg (sayfa arka planı), --color-text (ana metin), --color-primary (marka rengi), --color-surface (kart/panel arka planı) ve --color-border (ayırıcılar). Tutarlı bir belirteç kümesi, bileşenlerde gelişigüzel renk değerlerinin kullanılmasını önler.

Bileşen CSS'nizde background: var(--color-bg) ve color: var(--color-text) gibi değişkenlere başvurun. Ayrıca bir yedek değer sağlayabilirsiniz: var(--color-bg, #ffffff). Tarayıcı değişkeni boyama sırasında çözümler; bu nedenle tek bir sınıf hem açık hem de koyu temalarda çalışır.

:root seçicisine transition: background-color 200ms, color 200ms ekleyin. data-theme özniteliği değiştiğinde, CSS değişkenlerini kullanan tüm öğeler yeni değerlerine aynı anda geçiş yapar. Bu, herhangi bir JS animasyon kodu olmadan özenli bir görünüm oluşturur.

Temayı CSS değişkenleriyle yönetmek, JavaScript'ten satır içi stiller ayarlamaktan daha üstündür. Tarayıcı tüm stil yeniden hesaplamalarını yerel olarak yönetir, temalandırılmış her alt bileşen için tetiklenen ek React yeniden oluşturmaları olmaz ve CSS kaskadı kalıtımı otomatik olarak yönetir. JS'nin tek yapması gereken kök öğede bir özniteliği değiştirmektir.

CSS değişkenlerini @media (prefers-color-scheme: dark) sorgusuyla yalnızca CSS kullanan bir yedek çözüm olarak birleştirebilirsiniz. Koyu geçersiz kılmaları, data-theme seçicisine ek olarak veya onun yerine medya sorgusunun içinde tanımlayın. Böylece JavaScript henüz çalışmamış olsa bile koyu modun çalışması sağlanır.

En sağlam yaklaşım, her iki mekanizmayı katmanlandırır: @media sorgusu işletim sistemi varsayılanını sağlarken, data-theme özniteliği JavaScript üzerinden kullanıcı geçersiz kılmasına izin verir. Öznitelik mevcut olduğunda özgüllüğü nedeniyle öncelik kazanır; mevcut olmadığında medya sorgusu devreye girer.

Koyu arka planlarda kötü görünen görseller için, koyu source media="(prefers-color-scheme: dark)" alt öğesine sahip HTML picture öğesini kullanın. Tarayıcı koyu renkli sürümü otomatik olarak seçer. CSS içindeki SVG simgeleri için hızlı bir yaklaşık çözüm olarak filter: invert(1) kullanabilirsiniz.

CSS değişkenleri, :root yerine bir bileşenin kök öğesinde tanımlanarak tek tek bileşenlerle de sınırlandırılabilir. Bu, sayfa arka planından farklı kendi arka plan belirtecine sahip bir kenar çubuğu gibi bileşen başına temalandırmayı mümkün kılar; tüm bunlar genel tema değiştiricisiyle yine doğru şekilde değişir.

Chrome DevTools, Stiller panelinde çözümlenmiş CSS değişkeni değerlerini gösterir. Tanımına gitmek için değişken başvurusuna tıklayın. Böylece herhangi bir öğeye doğru koyu veya açık belirtecin uygulanıp uygulanmadığını kolayca doğrulayabilirsiniz. Paneldeki değişken değerlerini canlı olarak da düzenleyebilirsiniz.

Tüm belgeye uygulanan genel CSS özel özelliklerini tanımlamak için hangi CSS seçicisi kullanılır?

:root üzerindeki CSS özel özellikleri, temalar için merkezi bir belirteç sistemi sağlar. Temaları anında değiştirmek için html öğesinde bir data-theme özniteliğini değiştirin. Akıcı geçiş için CSS geçişleri ekleyin, yalnızca CSS kullanan bir yedek çözüm olarak prefers-color-scheme medya sorgusunu kullanın ve bileşen başına JS stil geçersiz kılmalarından kaçının.