Koyu mod

Web özellikleri: color-scheme prefers-color-scheme medya sorgusu light-dark() light-dark() resim değerleri image() accent-color

color-scheme özelliği, sayfanızın hangi renk şemalarını (ör. açık veya koyu) desteklediğini gösterir. Bu, tarayıcıya kaydırma çubukları, form kontrolleri ve varsayılan tuval arka planı gibi yerel kullanıcı arayüzü öğelerini sitenizin tasarımına uyacak şekilde otomatik olarak temalandırabileceğini ve ilk yükleme sırasında beyaz yanıp sönmeleri en aza indirmeye yardımcı olabileceğini bildirir.

Uygulama

1. HTML'de desteklenen şemaları bildirme

ZORUNLU: "Temasız içeriklerin anlık olarak görünmesini" (FOUC) önlemek için <head> etiketinizin içine bir <meta> etiketi yerleştirerek tarayıcının, oluşturma işlemine başlamadan önce hangi temaları desteklediğinizi bilmesini sağlayın. Bu <meta> etiketi, ilk tuval rengini erken ayarlayarak FOUC'yi önlemeye yardımcı olsa da tüm tarayıcılarda veya yükleme koşullarında yanıp sönmeleri tamamen ortadan kaldırmayabilir.

<!-- MANDATORY: Declare support for both light and dark themes -->
<meta name="color-scheme" content="light dark">

2. Sayfa genelindeki renk şemasını CSS :root veya html'ye uygula

ZORUNLU: color-scheme özelliğini html öğesine veya :root sözde sınıfına uygulayın. Tarayıcılar, kök kaydırma çubukları ve ilk "canvas" arka planı dahil olmak üzere tüm görüntü alanının temasını belirlemek için özellikle kök öğeye bakar. Yalnızca body öğesine uygulanırsa body, pencerenin oluşturma bağlamını kontrol etmediği için bu genel kullanıcı arayüzü yüzeyleri açık modda kalabilir.

/* MANDATORY: Apply color-scheme to :root or html for viewport-wide theming */
:root {
  /* MANDATORY: Automatically adapt native UI to user system preferences */
  color-scheme: light dark;
}

3. Açık ve koyu renk jetonlarını tanımlama

Farklı color-scheme değerlerine otomatik olarak uyum sağlayan renk jetonları tanımlamak için light-dark() işlevini kullanabilirsiniz.

Ham renk değerlerini ayrı özel özelliklerde tutmanız da önerilir. Bu sayede, değerleri farklı şekillerde birleştirmek daha kolay olur (ve gerekirse yedek davranış daha kolay hale gelir).

accent-color veya scrollbar-color gibi yerleşik kullanıcı arayüzü renkleri üzerinde daha fazla kontrol sahibi olmak için yazarlar, özel özellikler ve/veya light-dark() işlevini kullanarak kendi dinamik renklerini isteğe bağlı olarak ekleyebilir. Bu işlev, öğenin hesaplanan color-scheme değerine göre doğru rengi otomatik olarak seçer ve gereksiz medya sorgularına olan ihtiyacı ortadan kaldırır ancak temel bir uygulama için gerekli değildir.

:root {
  --color-brand-light: oklch(45% 0.23 270);
  --color-brand-dark: oklch(85% 0.15 210);
  --color-brand-text-light: white;
  --color-brand-text-dark: oklch(40% 0.23 270);

  --color-brand: light-dark(var(--color-brand-light), var(--color-brand-dark));
  --color-brand-text: light-dark(var(--color-brand-text-light), var(--color-brand-text-dark));

  /* MANDATORY: Automatically adapt native UI to user system preferences */
  color-scheme: light dark;
}

button.primary {
  /* These automatically adapt to color scheme */
  background-color: var(--color-brand);
  color: var(--color-brand-text);
}

İSTEĞE BAĞLI: Kullanılan renk şemasına (ve diğer renk modlarına, örneğin zorunlu renklere) otomatik olarak uyum sağlayan çeşitli sistem renkleri de mevcuttur. Örneğin, canvas, canvastext, accentcolor (destek durumunu kontrol edin), buttonborder vb. Bunlar genellikle belirli varsayılan tarayıcı kullanıcı arayüzleriyle tam olarak eşleşmeniz gereken çok özel durumlar dışında veya yedek/varsayılan olarak kullanılamayacak kadar sınırlıdır.

İSTEĞE BAĞLI: Renk çiftlerini bağlama göre uyarlama

Sistem varsayılanını geçersiz kılarken bile sayfanın etrafındaki tarayıcı ve OS kromunun (veya sayfa iframe olarak kullanıldığında çevreleyen sayfanın) renklerini dikkate alan farklı renk çiftlerini tanımlamak için prefers-color-scheme medya sorgusunu kullanmak yararlı olabilir.

Örneğin, sistem ayarı dark olduğunda biraz daha loş bir açık tema veya sistem ayarı light olduğunda daha kontrastlı bir koyu tema kullanın. Böylece sayfa, çevredeki kullanıcı arayüzü tarafından görsel olarak bastırılmaz.

Ayrıntılı tarayıcı kullanıcı arayüzü özelleştirmesi

color-scheme ayarı, tarayıcı kullanıcı arayüzünü kullanılan renk şemasına zaten uyarlar ancak bu ayar, web sitesi tasarımıyla tam olarak uyumlu olmayabilecek işletim sistemi varsayılanlarını ve/veya sistem renklerini kullanır. Modern tarayıcılar, bunlar için çeşitli ayrıntılı özelleştirme kancaları sunar. Modern tarayıcıların sağladığı özelleştirme kancalarını tüketmeden, yerel kontrolleri yalnızca görünümlerini özelleştirmek için yeniden uygulamayın.

Vurgu rengini ayarlama

Bazı tarayıcı kullanıcı arayüzlerinde (ör. işaretli onay kutuları veya kaydırma çubukları) vurgu rengi kullanılır. Bu, varsayılan olarak işletim sistemi ayarına göre belirlenir ancak accent-color özelliğini kullanarak sayfayla daha uyumlu bir renge (ör. sayfanın marka rengi) ayarlayabilirsiniz.

html {
  accent-color: light-dark(var(--color-accent-light), var(--color-accent-dark));
}

accent-color kullanırken dikkat edilmesi gereken sorunlar

accent-color öğesinin tarayıcıda oluşturulma şekli değişiklik gösterir. Tarayıcılar, genellikle vurgu rengi arka plan üzerine boyanan göstergeler (ör. onay kutusu işaretleri ve radyo düğmesi noktaları) için farklı işlemler uygulayabilir:

  • Chromium ve Firefox genellikle zıt bir gösterge rengi seçer.
  • Safari ise açık modda beyaz bir göstergeyi veya koyu modda siyah bir göstergeyi koruyarak arkasındaki vurgu rengini değiştirebilir. Bu ayarlama, sağlanan her renk için her zaman yeterli kontrast sağlamaz. Bu nedenle, Safari'de hem açık hem de koyu renk şemaları dahil olmak üzere önemli kombinasyonları test edin. Safari'nin en iyi kontrastı sağlayan gösterge rengini otomatik olarak seçeceğini varsaymayın.

Kaydırma çubuğu renkleri

Kullanılan renk şemasına uyum sağlayan özel kaydırma çubuğu renkleri ayarlamak için scrollbar-color ile light-dark() birlikte kullanabilirsiniz.

:root {
  --color-scrollbar-track: light-dark(#eee, #222);
  --color-scrollbar-thumb: light-dark(#999, #666);
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}

scrollbar-color kullanılırken dikkat edilmesi gereken sorunlar

  • scrollbar-color animasyonlu veya geçişli olmamalıdır. Bir WebKit hatası, scrollbar-color her değiştiğinde kaydırma çubuğunun titremesine neden oluyor.
  • macOS'te, yerel "yer paylaşımlı" kaydırma çubukları kullanıldığından scrollbar-color (standart) ve ::-webkit-scrollbar (eski) özellikleri varsayılan olarak yoksayılır. macOS'in özel renkleri oluşturmasını zorunlu kılmak için özel renkleri scrollbar-width (ör. thin veya auto) ile eşlemeniz GEREKİR.
  • scrollbar-width uygulansa bile macOS yer paylaşımlı kaydırma çubukları, kanalı (oluk) varsayılan olarak şeffaf şekilde oluşturur. Tasarım, macOS'te görünür bir kaydırma çubuğu arka plan rengi gerektiriyorsa kaydırılabilir kapsayıcıya scrollbar-gutter: stable; uygulamanız GEREKİR. Ancak bu rengin yalnızca kullanıcı fareyle kaydırma çubuğunun üzerine geldiğinde görüneceğini unutmayın.
  • scrollbar-gutter: stable olsa bile parça, macOS'te şeffaf olabilir. Kaydırma çubuğu, görünür olmak için parça rengine bağlı olmamalıdır.

Daha fazla özelleştirme

Çoğu tarayıcı kullanıcı arayüzü, görünümünü tamamen özelleştirmek için sözde öğeleri gösterir. Örneğin:

  • ::placeholder
  • ::spelling-error
  • ::grammar-error
  • ::selection
  • ::search-text
  • ::target-text
  • ::file-selector-button

Kullanılan renk şemasına uyum sağlayan renkler uygulamak için bunlardan herhangi birinde light-dark() renklerini kullanabilirsiniz.

4. Açık ve koyu mod için farklı resimler

CSS resimleri için farklı resim değerleri sağlamak amacıyla light-dark() da kullanılabilir.

ÖNEMLİ: light-dark() içindeki her iki değer de aynı türde olmalıdır. Bir rengi resimle birleştiremezsiniz. İkisinden birinin resim olması gerekiyorsa renk değerini sarmalamak için image(<color>) kullanın.

JS tabanlı tema algılama

Renk şeması dallandırmalarının çoğu, değişikliklere otomatik olarak uyum sağlayan CSS'de yapılmalıdır.

Sistem tercihi her an değişebileceğinden, matchMedia("(prefers-color-scheme: dark)").matches değerini okuyan tüm JS'ler change etkinliğini de işlemelidir.

İSTEĞE BAĞLI: Renk şeması açma/kapatma düğmesi uygulama

Kullanıcıların bu site için sistem varsayılanlarını manuel olarak geçersiz kılmasına izin vermek istiyorsanız koyu mod açma/kapatma düğmesi uygulayabilirsiniz. Çoğu sitenin kullanıcı arayüzünde kalıcı bir açma/kapatma düğmesine ihtiyacı yoktur. Genellikle sistem renk şemasını varsayılan olarak kullanmak yeterlidir. İsteğe bağlı olarak ayrı bir ayar yüzeyinde bir ayar da kullanılabilir. Koyu mod açma/kapatma düğmesi (kalıcı veya kalıcı olmayan) uygulamayla ilgili en iyi uygulamalar için Koyu mod açma/kapatma düğmeleri bölümüne bakın.

İSTEĞE BAĞLI: Bileşene özel geçersiz kılmalar

Belirli öğeler için color-scheme özelliğini ayarlayarak genel temayı geçersiz kılabilirsiniz.

Daha fazla bilgi ve dikkat edilmesi gereken noktalar için Bileşene özel açık/koyu temalar bölümüne bakın.

Bilinen sorunlar

color-scheme kullanırken dikkat edilmesi gereken sorunlar

  • Chrome ve Firefox, iframe'ler için color-scheme özelliğini dikkate alır: Yerleştirilmiş sayfaları doğru renk şemasında oluşturur ve yerleştirilmiş sayfanın prefers-color-scheme medya sorgusunu, yerleştirme bağlamının color-scheme özelliğini yansıtacak şekilde ayarlar. Safari ise bunu yapmaz ve iframe'lerde bile prefers-color-scheme değerini sistem ayarına göre belirler.
    • Hem üst öğeyi hem de iFrame'i kontrol ediyorsanız: Üst öğenin renk şemasını iFrame'e açıkça iletin. Bunu, iFrame oluşturma sırasında bir URL parametresi (?theme=dark) aracılığıyla veya postMessage() aracılığıyla (çalışma zamanı değişikliklerine de tepki vermenizi sağlar) yapabilirsiniz. iFrame'de, prefers-color-scheme yerine bu sinyalden <html> (ve/veya :root üzerinde color-scheme) bir sınıf ayarlayın.
    • Yalnızca yerleştirilmiş sayfayı kontrol ediyorsanız: Safari'de iframe'in içinden yerleştirme bağlamının color-scheme değerini tespit etmenin güvenilir bir yolu yoktur. Yerleştirme API'nizde açık bir tema parametresi (ör. sorgu dizesi veya postMessage protokolü) gösterin ve bunu yerleştirme işlemi yapanlar için belgeleyin.

Yedek stratejiler

Renk şeması için yedekler ve tarayıcı desteği

color-scheme özelliği progresif geliştirmedir. Bu özelliği desteklemeyen tarayıcılar bu özelliği yok sayar ve varsayılan açık mod kullanıcı arayüzünü kullanır.

Eski tarayıcılarda kullanıcının tercihlerine uyum sağlamak için prefers-color-scheme medya sorgularını kullanarak koyu mod tercih edildiğinde farklı renkler sunun.

  • :root veya html üzerinde özel özellikleri değiştirmek için medya sorgusunu KULLANIN.
  • Bileşen, renklerin ötesinde çok özel bir koyu mod özelleştirmesi gerektirmediği sürece medya sorgusunu tek tek bileşenlerde kullanmaktan kaçının.
:root {
  /* Define brand colors for each mode */
  --color-brand-light: #0056b3;
  --color-brand-dark: #00e5ff;
  --color-brand: var(--color-brand-light);

  /* MANDATORY: Fallback for browsers without light-dark support */
  @media (prefers-color-scheme: dark) {
    --color-brand: var(--color-brand-dark);
  }

  /* Ignored in older browsers */
  color-scheme: light dark;
}

button.primary {
    background-color: var(--color-brand);
}

light-dark() için yedekler ve tarayıcı desteği

color-scheme özelliğini destekleyen ancak henüz light-dark() özelliğini desteklemeyen tarayıcılar için renklerin açık ve koyu sürümleri önce özel özellikler olarak tanımlanmalı ve aşağıdaki örnekte olduğu gibi ilgili modun renklerini ayarlamak için prefers-color-scheme medya sorgusu kullanılmalıdır:

:root {
  /* Define browser UI accent color for each mode */
  --brand-accent-light: #0056b3;
  --brand-accent-dark: #00e5ff;
  --accent-color: var(--brand-accent-light);

  /* MANDATORY: Fallback for browsers without light-dark support */
  @media (prefers-color-scheme: dark) {
    --accent-color: var(--brand-accent-dark);
  }

  /* OPTIONAL: use light-dark() for more control of built-in UI colors */
  @supports (color: light-dark(white, black)) {
    --accent-color: light-dark(var(--brand-accent-light), var(--brand-accent-dark));
  }

  /* MANDATORY: Automatically adapt native UI to user system preferences */
  color-scheme: light dark;

  /* Example inherited color property */
  accent-color: var(--accent-color);
}

pre, code {
  color-scheme: dark;

  /* **Mandatory**: any inherited color properties must be set again, even if to the same design tokens */
  accent-color: var(--accent-color);
}

light-dark() resim değerleri için yedekler ve tarayıcı desteği

Resimler için light-dark() özelliğini desteklemeyen tarayıcılarda anahtar olarak image-set() kullanın: Her seçeneğe özel bir özellikten type() verin ve etkin olmayan seçeneği desteklenmeyen bir MIME türüne ayarlayın. Böylece tarayıcı bu seçeneği yok sayar. Etkin seçeneğin değeri boş olur. Bu nedenle, type() içermeyen düz bir image-set() seçeneğidir.

Anahtarı :root üzerinde bir kez tanımlayın. Bu durumda, her kullanım sitesinde yalnızca her iki resmin de satır içi olması gerekir (ör. light-dark()).

:root {
  --light-type: ;
  --dark-type: type("image/do-not-use");

  /* MANDATORY: Fallback for browsers without light-dark() image support */
  @media (prefers-color-scheme: dark) {
    --light-type: type("image/do-not-use");
    --dark-type: ;
  }
}

.hero {
  background-image: image-set(url(hero-light.png) var(--light-type), url(hero-dark.png) var(--dark-type));

  @supports (background-image: light-dark(url("a"), url("b"))) {
    background-image: light-dark(url(hero-light.png), url(hero-dark.png));
  }
}
  • Yalnızca seçilen resim indirilir.
  • Çözümler hâlâ geçerli: image-set(url(a-1x.png) 1x var(--light-type), url(a-2x.png) 2x var(--light-type), url(b-1x.png) 1x var(--dark-type), url(b-2x.png) 2x var(--dark-type)).
  • Etkin seçenek için type("") KULLANMAYIN. Tarayıcılar boş dizeyi desteklenmeyen dize olarak kabul eder ve her seçeneği siler.
  • light-dark()'in aksine, anahtar bir alt ağaçta ayarlanan color-scheme'i izlemez. Manuel açma/kapatma düğmesi veya color-scheme değerini ayarlayan herhangi bir alt ağaç, --light-type ve --dark-type değerlerini de değiştirmelidir.

Alternatif: Resim başına bir özel özellik

Yalnızca birkaç resim farklı olduğunda daha basittir ancak her resmin kendi medya sorgusu dalına ihtiyacı vardır ve her birinin manuel olarak açılması gerekir.

:root {
  --hero-image: url(hero-light.png);

  @media (prefers-color-scheme: dark) {
    --hero-image: url(hero-dark.png);
  }

  @supports (background-image: light-dark(url("a"), url("b"))) {
    --hero-image: light-dark(url(hero-light.png), url(hero-dark.png));
  }
}

.hero {
  background-image: var(--hero-image);
}

image() için yedekler ve tarayıcı desteği

Tek bir renk geçiş noktası olan ve konum içermeyen bir gradyan kullanın (ör. linear-gradient(blue)).

Daha geniş tarayıcı desteği için tek renk durağına açıkça 0 100% konum sağlayabilirsiniz (ör. linear-gradient(blue 0 100%)).

scrollbar-color için yedekler ve tarayıcı desteği

Bu özellik progresif geliştirme olup her zaman yedek gerektirmez.

Stil önemliyse ve kullanıcının Baseline hedefi "Baseline Widely Available" veya daha eskiyse standart olmayan ::-webkit-scrollbar sözde öğelerini yedek olarak eklemeniz GEREKİR.

Hem standart özellikleri hem de eski WebKit seçicileri yerel olarak destekleyen tarayıcılarda bu ikisi arasında çakışma olmasını önlemek için eski yedekleri bir @supports not (scrollbar-color: auto) bloğuna sarmalayın.

Renkleri tanımlamak için özel özellikler kullanıyorsanız bunlar otomatik olarak eski WebKit seçicilere uygulanır. Bunları kopyalamanız GEREKMEZ.

/* Legacy fallback for WebKit/Blink browsers */
@supports not (scrollbar-color: auto) {
  .scroller::-webkit-scrollbar {
    /* Must define base size in WebKit for custom colors to be visual */
    width: 12px;
    height: 12px;
  }

  .scroller::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }

  .scroller::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}

Vurgu rengi için yedekler ve tarayıcı desteği

accent-color özelliği, progresif geliştirmedir. Bu özelliği desteklemeyen tarayıcılar, özelliği yok sayar ve varsayılan kullanıcı arayüzü renklerini kullanır.