color-scheme
CSS özelliği ve ilgili meta etiket, geliştiricilerin sayfalarında kullanıcı aracısı stil sayfasının temaya özgü varsayılan ayarlarını etkinleştirmesine olanak tanır.
Arka plan
prefers-color-scheme
kullanıcı tercihi medya özelliği
prefers-color-scheme
kullanıcı tercihi medya özelliği, geliştiricilere sayfalarının görünümü üzerinde tam kontrol sağlar.
Bu konuda bilginiz yoksa lütfen
prefers-color-scheme
: Merhaba karanlık, eski dostum.
Koyu mod ile ilgili muhteşem deneyimler oluşturma hakkında bildiğim her şeyi belgeledim.
Makalede yalnızca kısaca değinilen yapboz parçalarından biri, color-scheme
CSS özelliği ve aynı ada karşılık gelen meta etikettir.
Her ikisi de sayfanızı kullanıcı aracısı stil sayfasının temaya özgü varsayılan ayarlarına (örneğin, form denetimleri, kaydırma çubukları ve CSS sistem renkleri) dahil etmenize olanak tanıyarak geliştirici olarak hayatınızı kolaylaştırır.
Aynı zamanda bu özellik, tarayıcıların herhangi bir dönüşümü kendi başına uygulamasını da engeller.
Tarayıcı desteği
prefers-color-scheme
color-scheme
Kullanıcı aracısı stil sayfası
Devam etmeden önce, kullanıcı aracısı stil sayfasının ne olduğunu kısaca açıklayayım. Çoğu zaman kullanıcı aracısı (UA) sözcüğünü tarayıcı demenin süslü bir yolu olarak düşünebilirsiniz. UA stil sayfası, bir sayfanın varsayılan görünümünü ve tarzını belirler. Adından da anlaşılacağı gibi UA stil sayfası, söz konusu UA'ya bağlı olan bir öğedir. Chrome'un (ve Chromium'un) UA stil sayfasına bakıp Firefox veya Safari'nin (ve WebKit'in) stiliyle karşılaştırabilirsiniz. UA stil sayfaları genellikle çoğu şeyi kabul eder. Örneğin, hepsi bağlantıları mavi, genel metni siyah ve arka plan rengini beyaz yapar, ancak aynı zamanda önemli (ve bazen rahatsız edici) farklılıklar da vardır (örneğin, form denetimlerinin stillendirilme şekli).
WebKit'in UA stil sayfasına ve koyu modla ilgili işleyişe daha yakından bakın.
(Stil sayfasında "koyu" için tam metin araması yapın.)
Stil sayfası tarafından sağlanan varsayılan değer, koyu modun açık veya kapalı olmasına göre değişir. Bunu göstermek için aşağıda, :matches
sözde sınıfını ve WebKit dahili değişkenlerini (-apple-system-control-background
gibi WebKit değişkenlerini) ve #if defined
WebKit dahili ön işlemci yönergesini kullanan bir CSS kuralını görebilirsiniz:
input,
input:matches([type="password"], [type="search"]) {
-webkit-appearance: textfield;
#if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
HAVE_OS_DARK_MODE_SUPPORT
color: text;
background-color: -apple-system-control-background;
#else
background-color: white;
#endif
/* snip */
}
Yukarıda color
ve background-color
özellikleri için standart olmayan bazı değerler dikkatinizi çekecektir.
text
veya -apple-system-control-background
geçerli CSS renkleri değildir.
Bunlar, WebKit'in dahili anlamsal renkleridir.
CSS'nin anlamsal sistem renklerini standart hale getirdiği anlaşılıyor.
CSS Renk Modülü Düzey 4'te belirtilir.
Örneğin, Canvas
(<canvas>
etiketi ile karıştırılmaması gerekir) uygulama içeriğinin veya belgelerinin arka planı içindir. CanvasText
ise uygulama içeriği veya dokümanlardaki metin içindir.
Bu ikisi birlikte kullanılabilir ve tek başına kullanılmamalıdır.
UA stil sayfaları, HTML öğelerinin varsayılan olarak nasıl oluşturulması gerektiğini belirlemek için kendi özel veya standartlaştırılmış anlamsal sistem renklerini kullanabilir.
İşletim sistemi koyu moda ayarlanırsa veya koyu tema kullanıyorsa CanvasText
(veya text
) koşul olarak beyaz, Canvas
(veya -apple-system-control-background
) ise siyah olarak ayarlanır.
Daha sonra UA stil sayfası aşağıdaki CSS'yi yalnızca bir kez atar ve hem açık hem de koyu modu kapsar.
/**
Not actual UA stylesheet code.
For illustrative purposes only.
*/
body {
color: CanvasText;
background-color: Canvas
}
color-scheme
CSS mülkü
CSS Renk Ayarlama Modülü Düzey 1 spesifikasyonu, bir model sunar ve koyu mod, kontrast ayarlaması veya istenen belirli renk şemaları gibi kullanıcı tercihlerini yönetme hedefiyle kullanıcı aracısı tarafından otomatik renk ayarlaması üzerinde kontrol sağlar.
Burada tanımlanan color-scheme
özelliği, bir öğenin hangi renk şemalarıyla oluşturulabileceğini belirtmesine olanak tanır.
Bu değerler kullanıcının tercihlerine göre belirlenir. Böylece, form denetimlerinin ve kaydırma çubuklarının varsayılan renklerinin yanı sıra CSS sistem renklerinin kullanılan değerleri gibi kullanıcı arayüzü öğelerini etkileyen seçili bir renk şeması elde edilir.
Şu anda aşağıdaki değerler desteklenmektedir:
normal
Öğenin renk şemalarından hiç haberdar olmadığını ve bu nedenle öğenin, tarayıcının varsayılan renk şemasıyla oluşturulması gerektiğini belirtir.[ light | dark ]+
Öğenin, listelenen renk şemalarını bildiğini ve işleyebildiğini belirtir ve bunlar arasında sıralı bir tercih ifade eder.
Bu listede, light
açık renk arka plan renklerine ve koyu ön plan renklerine sahip açık renk şemasını temsil ederken, dark
ise koyu arka plan ve açık ön plan renkleriyle bunun tersini temsil etmektedir.
Tüm öğelerde, renk şemasıyla oluşturma işlemi, tarayıcı tarafından sağlanan tüm kullanıcı arayüzünde öğe için kullanılan renklerin, renk şemasının amacıyla uyumlu olmasını sağlamalıdır. Bunlara örnek olarak kaydırma çubukları, yazım denetiminin alt çizgileri, form denetimleri verilebilir.
:root
öğesinde renk şemasıyla oluşturma işlemi ayrıca tuvalin yüzey rengini (yani genel arka plan rengini), color
özelliğinin ilk değerini ve sistem renklerinin kullanılan değerlerini etkilemeli, ayrıca görüntü alanının kaydırma çubuklarını da etkilemelidir.
/*
The page supports both dark and light color schemes,
and the page author prefers dark.
*/
:root {
color-scheme: dark light;
}
color-scheme
meta etiketi
color-scheme
CSS özelliğinin dikkate alınması için CSS'nin ilk kez indirilmesi (<link rel="stylesheet">
aracılığıyla başvuruda bulunuluyorsa) ve ayrıştırılması gerekir.
Kullanıcı aracılarına, sayfa arka planını hemen istenen renk şemasıyla oluşturmada yardımcı olmak için <meta name="color-scheme">
öğesinde color-scheme
değeri de sağlanabilir.
<!--
The page supports both dark and light color schemes,
and the page author prefers dark.
-->
<meta name="color-scheme" content="dark light">
color-scheme
ve prefers-color-scheme
birleştiriliyor
Hem meta etiket hem de CSS özelliği (:root
öğesine uygulanırsa) sonunda aynı davranışta bulunacağından, tarayıcının tercih edilen şemayı daha hızlı bir şekilde kullanabilmesi için renk şemasını her zaman meta etiketle belirtmenizi öneririm.
Mutlak referans sayfalar için ek CSS kuralı gerekli olmasa da genel durumda color-scheme
öğesini her zaman prefers-color-scheme
ile birleştirmeniz gerekir.
Örneğin, WebKit ve Chrome tarafından klasik mavi rgb(0,0,238)
bağlantısı için kullanılan özel WebKit CSS rengi -webkit-link
, siyah arka planda 2,23:1'lik yetersiz kontrast oranına sahiptir ve hem WCAG AA hem de WCAG AAA gereksinimleri başarısızdır.
Bu sorunu düzeltmek için Chrome, WebKit ve Firefox'ta hatalar ve HTML Standardı'nda bir meta sorun açtım.
prefers-color-scheme
ile etkileşim kurun
color-scheme
CSS özelliğinin ve karşılık gelen meta etiketin prefers-color-scheme
kullanıcı tercihi medya özelliğiyle birlikte çalışması başlangıçta kafa karıştırıcı görünebilir.
Aslında birlikte çok iyi oyun oynuyorlar.
Anlaşılması gereken en önemli nokta, varsayılan görünümün yalnızca color-scheme
tarafından belirlendiği, prefers-color-scheme
ise stillenebilir görünümü belirlediğidir.
Bunu daha açık hale getirmek için aşağıdaki sayfayı kabul edin:
<head>
<meta name="color-scheme" content="dark light">
<style>
fieldset {
background-color: gainsboro;
}
@media (prefers-color-scheme: dark) {
fieldset {
background-color: darkslategray;
}
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, legere ancillae ne vis.
</p>
<form>
<fieldset>
<legend>Lorem ipsum</legend>
<button type="button">Lorem ipsum</button>
</fieldset>
</form>
</body>
Sayfadaki satır içi CSS kodu, <fieldset>
öğesinin background-color
değerini genel durumda gainsboro
olarak, kullanıcı prefers-color-scheme
kullanıcı tercihli medya özelliğine göre dark
renk şemasını tercih ederse darkslategray
değerine ayarlar.
<meta name="color-scheme" content="dark light">
öğesi aracılığıyla sayfa, tarayıcıya koyu temayı tercih ederek koyu ve açık temayı desteklediğini bildirir.
İşletim sisteminin koyu moda mı yoksa açık moda mı ayarlandığına bağlı olarak kullanıcı aracısı stil sayfasına bağlı olarak tüm sayfa koyu modda veya koyu modda görünür. Paragraf metnini veya sayfanın arka plan rengini değiştirmek için geliştirici tarafından sağlanan başka bir CSS değildir.
<fieldset>
öğesinin background-color
değerinin, sayfada geliştirici tarafından sağlanan satır içi stil sayfasında yer alan kurallar uygulanarak koyu modun etkin olup olmadığına göre nasıl değiştiğine dikkat edin.
gainsboro
veya darkslategray
.
![Açık modda bir sayfa.](https://web.developers.google.cn/static/articles/color-scheme/image/a-page-light-mode-20033c5b52e57.png?authuser=5&hl=tr)
<fieldset>
öğesinin background-color
değeri, satır içi geliştirici stil sayfasına göre gainsboro
.
![Koyu moddaki bir sayfa.](https://web.developers.google.cn/static/articles/color-scheme/image/a-page-dark-mode-db72ce14278ec.png?authuser=5&hl=tr)
<fieldset>
öğesinin background-color
değeri, satır içi geliştirici stil sayfasına göre darkslategray
.
<button>
öğesinin görünümü, kullanıcı aracısı stil sayfası tarafından kontrol edilir.
Bu öğenin color
değeri ButtonText
sistem rengine, background-color
ile dört border-color
değeri de sistem rengine ButtonFace
olarak ayarlanmıştır.
![ButtonFace özelliğini kullanan açık mod sayfası.](https://web.developers.google.cn/static/articles/color-scheme/image/a-light-mode-page-uses-2d1dbd77e94d4.png?authuser=5&hl=tr)
background-color
ve çeşitli border-color
öğeleri ButtonFace
sistem rengine ayarlanır.
Şimdi <button>
öğesinin border-color
metriğinin nasıl değiştiğine dikkat edin.
Kullanıcı aracısı, ButtonFace
öğesini renk şemasına göre dinamik olarak güncellediğinden, border-top-color
ve border-bottom-color
için hesaplanan değer rgba(0, 0, 0, 0.847)
(siyah) değerinden rgba(255, 255, 255, 0.847)
(beyaz) değerine değişir.
Aynı durum, <button>
öğesinin karşılık gelen sistem rengine (ButtonText
) ayarlanmış color
için de geçerlidir.
![Hesaplanan renk değerlerinin ButtonFace ile eşleştiği gösteriliyor.](https://web.developers.google.cn/static/articles/color-scheme/image/showing-the-computed-col-b5a5bb27a14d7.png?authuser=5&hl=tr)
ButtonFace
olarak ayarlanmış olan border-top-color
ve border-bottom-color
değerlerinin hesaplanan değerleri artık rgba(0, 0, 0, 0.847)
.
![Hesaplanan renk değerlerinin koyu moddayken ButtonFace'le eşleştiği gösteriliyor.](https://web.developers.google.cn/static/articles/color-scheme/image/showing-the-computed-col-fbfce1c6513a9.png?authuser=5&hl=tr)
ButtonFace
olarak ayarlanan border-top-color
ve border-bottom-color
için hesaplanan değerler artık rgba(255, 255, 255, 0.847)
olarak belirlenmiştir.
Demo
color-scheme
öğesinin etkilerinin çok sayıda HTML öğesine uygulandığını görmek için Glitch demosunu inceleyebilirsiniz.
Demoda, WCAG AA ve WCAG AAA ihlali yukarıdaki uyarıda belirtilen bağlantı renkleriyle kasıtlı olarak gösterilmektedir.
![Açık modda gösterilen demo.](https://web.developers.google.cn/static/articles/color-scheme/image/the-demo-while-light-mod-8d16b35fd6de9.png?authuser=5&hl=tr)
color-scheme: light
olarak değiştirildi.
![Koyu modda gösterilen demo.](https://web.developers.google.cn/static/articles/color-scheme/image/the-demo-while-dark-mode-9f130b7310353.png?authuser=5&hl=tr)
color-scheme: dark
olarak değiştirildi.
Bağlantı renkleriyle WCAG AA ve WCAG AAA
ihlalini
not edin.
Teşekkür
color-scheme
CSS özelliği ve karşılık gelen meta etiket Rune Lillesveen tarafından uygulanmıştır.
Rune ayrıca CSS Renk Ayarlama Modülü Düzey 1 spesifikasyonunun ortak düzenleyicisidir.
Philippe Leone'nin Unsplash'teki hero resim.