color-scheme
CSS mülkü ve ilgili meta etiketi, geliştiricilerin sayfalarını kullanıcı aracısı stil sayfasının temaya özel varsayılanlarına dahil etmesine 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 başlıklı makalemi okuyun. Bu makalede, muhteşem koyu mod deneyimleri oluşturma hakkında bildiklerimin tamamını bulabilirsiniz.
Makalede yalnızca kısaca bahsedilen bir bulmaca parçası, color-scheme
CSS özelliği ve aynı ada sahip ilgili meta etikettir.
Her ikisi de sayfanızı, kullanıcı aracısı stil sayfasının temaya özel varsayılanlarına (ör. form kontrolleri, 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 kendi kendilerine dönüşüm uygulamasını 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çıklamama izin verin. Kullanıcı aracısı (UA) kelimesini çoğu zaman 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ıdır. Chrome'un (ve Chromium'un) UA stil sayfasına göz atabilir ve bunu Firefox veya Safari'nin (ve WebKit'in) stil sayfasıyla karşılaştırabilirsiniz. Genellikle UA stil sayfaları çoğu konuda aynı fikirdedir. Örneğin, hepsi bağlantıları mavi, genel metni siyah ve arka plan rengini beyaz yapar. Ancak form denetimlerinin stilini belirleme şekli gibi önemli (ve bazen can sıkıcı) farklılıklar da vardır.
WebKit'in UA stil sayfasına ve koyu modla ilgili işlevine daha yakından bakın.
(Stil sayfasında "dark" için tam metin araması yapın.)
Stil sayfası tarafından sağlanan varsayılan değer, karanlık modun açık veya kapalı olmasına göre değişir. Bunu açıklamak için :matches
sözde sınıfını ve -apple-system-control-background
gibi WebKit'e özgü değişkenleri, ayrıca WebKit'e özgü önişleyici yönergesini #if defined
kullanan bu CSS kuralını inceleyebilirsiniz:
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ıdaki color
ve background-color
özellikleri için standart olmayan bazı değerler göreceksiniz.
text
ve -apple-system-control-background
geçerli CSS renkleri değildir.
Bunlar WebKit'e özgü semantik renklerdir.
CSS'de standartlaştırılmış anlamsal sistem renkleri olduğu ortaya çıktı.
Bunlar CSS Renk Modülü 4. Seviye'de belirtilmiştir.
Örneğin, Canvas
(<canvas>
etiketiyle karıştırılmamalıdır) uygulama içeriğinin veya dokümanların arka planı için kullanılır. CanvasText
ise uygulama içeriğindeki veya dokümanlardaki metin için kullanılır.
Bu iki özellik birlikte kullanılır ve ayrı olarak kullanılmamalıdır.
UA stil sayfaları, HTML öğelerinin varsayılan olarak nasıl oluşturulacağını belirlemek için kendi özel renklerini veya standartlaştırılmış anlamsal sistem renklerini kullanabilir.
İşletim sistemi koyu modda ayarlanmışsa veya koyu tema kullanıyorsa CanvasText
(veya text
) koşullu olarak beyaza, Canvas
(veya -apple-system-control-background
) ise siyaha ayarlanır.
Ardından 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 özelliği
CSS Renk Ayarı Modülü 1. Seviye spesifikasyonu, koyu mod, kontrast ayarı veya istenen belirli renk şemaları gibi kullanıcı tercihlerini işlemek amacıyla kullanıcı aracısı tarafından otomatik renk ayarı için bir model ve denetimler sunar.
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 tercihleriyle birlikte değerlendirilir. Böylece, form denetimlerinin ve kaydırma çubuklarının varsayılan renkleri gibi kullanıcı arayüzü (UI) öğelerinin yanı sıra CSS sistem renklerinin kullanılan değerlerini etkileyen bir renk şeması seçilir.
Şu anda aşağıdaki değerler desteklenmektedir:
normal
Öğenin renk şemalarından haberdar olmadığını ve bu nedenle öğenin tarayıcının varsayılan renk şemasıyla oluşturulması gerektiğini gösterir.[ light | dark ]+
Öğenin, listelenen renk düzenlerini bildiği ve işleyebildiği anlamına gelir ve bunlar arasında sıralı bir tercih ifade eder.
Bu listede light
, açık arka plan renkleri ve koyu ön plan renkleri içeren açık bir renk şemasını temsil ederken dark
, koyu arka plan renkleri ve açık ön plan renkleri içeren tam tersini temsil eder.
Tüm öğeler için renk şemasıyla oluşturma işlemi, öğenin tarayıcı tarafından sağlanan tüm kullanıcı arayüzünde kullanılan renklerin renk şemasının amacına uygun olmasına neden olmalıdır. Kaydırma çubukları, yazım denetimi altı çizilileri, form denetimleri vb. örneklerdir.
:root
öğesinde, renk şemasıyla oluşturma işlemi ayrıca kanvasın yüzey rengini (yani genel arka plan rengini), color
mülkünün 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 önce indirilmesi (<link rel="stylesheet">
aracılığıyla referans veriliyorsa) ve ayrıştırılması gerekir.
Kullanıcı aracılarının sayfa arka planını hemen istenen renk şemasıyla oluşturmasına yardımcı olmak için <meta name="color-scheme">
öğesinde bir 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
'u birleştirme
Hem meta etiketi hem de CSS özelliği (:root
öğesine uygulanırsa) sonunda aynı davranışa yol açtığından, tarayıcının tercih edilen şemaya daha hızlı uyum sağlayabilmesi için renk şemasını her zaman meta etiketi aracılığıyla belirtmenizi öneririz.
Mutlak temel sayfalar için ek CSS kuralı gerekmese de genel olarak color-scheme
'ü her zaman prefers-color-scheme
ile birlikte kullanmanız gerekir.
Örneğin, WebKit ve Chrome tarafından klasik bağlantı mavi rgb(0,0,238)
için kullanılan özel WebKit CSS rengi -webkit-link
, siyah arka planda 2,23:1 olan yetersiz bir kontrast oranına sahiptir ve hem WCAG AA hem de WCAG AAA şartlarını ihlal eder.
Bu sorunun düzeltilmesi için Chrome, WebKit ve Firefox ile ilgili hatalar ve HTML standardında meta sorunu kaydettim.
prefers-color-scheme
ile etkileşim
color-scheme
CSS mülkünün ve ilgili meta etiketinin prefers-color-scheme
kullanıcı tercihi medya özelliğiyle etkileşimi ilk başta kafa karıştırıcı görünebilir.
Hatta birlikte çok iyi oynarlar.
Anlamanız gereken en önemli nokta, color-scheme
'ün yalnızca varsayılan görünümü belirlemesi, prefers-color-scheme
'un ise stillenebilir görünümü belirlemesidir.
Bunu daha net bir şekilde açıklamak için aşağıdaki sayfayı ele alalım:
<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
özelliğini genel durumda gainsboro
olarak, kullanıcı prefers-color-scheme
kullanıcı tercihi medya özelliğine göre dark
renk şemasını tercih ederse darkslategray
olarak ayarlar.
Sayfa, <meta name="color-scheme" content="dark light">
öğesi aracılığıyla tarayıcıya koyu ve açık temayı desteklediğini, tercihin koyu tema olduğunu bildirir.
İşletim sisteminin koyu veya açık modda ayarlanmış olmasına bağlı olarak, sayfanın tamamı kullanıcı aracısı stil sayfasına göre koyu zemin üzerine açık veya açık zemin üzerine koyu renkte görünür. Paragraf metnini veya sayfanın arka plan rengini değiştirmek için geliştirici tarafından sağlanan ek CSS yoktur.
<fieldset>
öğesinin background-color
özelliğinin, geliştirici tarafından sayfadaki satır içi stil sayfasında belirtilen kurallara göre koyu modun etkin olup olmadığına bağlı olarak nasıl değiştiğini unutmayın.
gainsboro
veya darkslategray
olmalıdır.
<button>
öğesinin görünümü, kullanıcı aracısı stil sayfası tarafından kontrol edilir.
color
değeri ButtonText
sistem rengine, background-color
değeri ve dört border-color
değeri ise ButtonFace
sistem rengine ayarlanmıştır.
Şimdi <button>
öğesinin border-color
değerinin nasıl değiştiğine dikkat edin.
Kullanıcı aracısı, ButtonFace
değerini renk şemasına göre dinamik olarak güncellediğinden border-top-color
ve border-bottom-color
için hesaplanmış değer rgba(0, 0, 0, 0.847)
(siyahımsı) yerine rgba(255, 255, 255, 0.847)
(beyazımsı) olur.
Aynı durum, ilgili sistem rengi ButtonText
olarak ayarlanan <button>
öğesinin color
için de geçerlidir.
Demo
color-scheme
özelliğinin çok sayıda HTML öğesine uygulandığı etkileri Glitch'teki bir denemede görebilirsiniz.
Demoda, yukarıdaki uyarıda belirtilen bağlantı renkleriyle WCAG AA ve WCAG AAA ihlali kasıtlı olarak gösterilmektedir.
Teşekkür ederiz
color-scheme
CSS özelliği ve ilgili meta etiketi Rune Lillesveen tarafından uygulanmıştır.
Rune, CSS Renk Düzenleme Modülü 1. Seviye spesifikasyonunun ortak düzenleyicisidir.
Unsplash'taki Philippe Leone tarafından oluşturulan hero resim.