Bileşene özel açık/koyu temalar

Genellikle kök üzerinde ayarlansa da color-scheme özelliği, sayfanın geri kalanından farklı bir renk şemasına zorlamak için ayrı ayrı öğeler üzerinde ayarlanabilir. Bu, her zaman belirli bir renk şemasında (ör. her zaman koyu veya açık modda) görüntülenmesi gereken bileşenler için yararlı olabilir.

Örnek kullanım alanları şunlardır:

• Estetik nedenlerle açık mod sayfalarında bile genellikle koyu modda olan öğeler (ör. kod blokları, medya oynatıcılar, fotoğraf galerileri)
• Açık renkli arka planlar için tasarlanmış medya (ör. resimler, videolar, çizimler, baskı önizlemeleri) içeren alanlar, sayfanın geri kalanı koyu modda olsa bile açık moda ayarlanabilir.
• Renk şeması, kullanıcı düzeyindeki bir ayar tarafından kontrol edilen öğeler (ör. bileşen önizlemeleri)
• Hem açık hem de koyu modu desteklemeyen yerleştirmeler
• Tasarım araçları, haritalar, görselleştirmeler, oyunlar vb.

Renkleri ne zaman değiştirmeli ve ne zaman color-scheme'i zorlamalı?

Açık modda koyu arka plan üzerinde açık renk metin veya koyu modda açık arka plan üzerinde koyu renk metin kullanan her öğe için farklı bir color-scheme gerekmez. Örneğin, birincil düğme açık modda beyaz metinle mavi olarak oluşturulabilir ancak bu, color-scheme: dark gerektirmez.

Genel bir kural olarak, farklı bir color-scheme kullanan öğeler genellikle basit sığ kapsayıcılar yerine kendi görsel bağlamlarını oluşturan karmaşık yüzeylerdir.

Bir öğede farklı bir color-scheme kullanmayı düşünürken kendinize şunları sorun:

• Özelleştirilmemiş yerleşik tarayıcı kullanıcı arayüzü (ör.form kontrolleri, kaydırma çubukları vb.) bu renk şemasını mı kullanmalı yoksa sayfanın renk şemasına mı uyum sağlamalı? -> if the former, don't use color-scheme.
• light-dark() renkleri, sayfanın geri kalanında olduğu gibi mi yoksa geçersiz kılmaya göre mi çözümlenmeli? -> if the former, don't use color-scheme.
• Alt öğeler bu color-scheme içinde olmalı mı? Aksi takdirde color-scheme özelliğini kullanmayın.

Temel uygulama

Bileşene özgü geçersiz kılmalar genellikle (kesinlikle gerekli olmasa da) global bir color-scheme aracılığıyla birden fazla renk şemasını destekleyen sayfalarda kullanılır. Sayfa genelinde koyu modu iyi bir şekilde uygulamak için Koyu mod başlıklı makaleyi inceleyin.

Sayfa genelinde color-scheme uygulandıktan ve buna duyarlı renk jetonları (ör. light-dark() aracılığıyla) kullanıldıktan sonra, belirli bileşenlerde color-scheme ayarlayarak ilgili alt ağacın renk modunu geçersiz kılabilirsiniz:

pre, code, .dark {
  color-scheme: dark;
}

Bazı tarayıcıların, bileşenleri otomatik olarak farklı bir renk şemasına uyarladığını unutmayın. Belirtilen renk şemasını her durumda zorunlu kılmak için only kullanın (ör. color-scheme: dark; yerine color-scheme: only dark;).

Renk dışı değerler uyarlanıyor

light-dark() şu anda yalnızca renkler için kullanılabilir.

En iyi uygulamalar

• ZORUNLU: Arka planı olmayan öğelerde color-scheme değerini ayarlamayın. Aksi takdirde, farklı renk şemalarından arka plan ve metin rengi çiftleri karışabilir ve metin okunamaz hale gelebilir.
• İSTEĞE BAĞLI: Sayfa genelindeki koyu modla aynı renk çiftlerini yeniden kullanmak daha kolay olsa da bu bileşenler için farklı renk çiftleri tanımlayabiliriz. Örneğin, açık mod sayfasında kullanılan koyu mod bileşeninin, genel olarak koyu modda olan bir sayfada kullanılan aynı koyu mod bileşenine göre biraz daha az koyu olmasını isteyebiliriz.

Bilinen sorunlar

Dikkat edilmesi gereken önemli nokta: light-dark() renklerinin devralınması

light-dark(), hesaplanan değer zamanında çözümlenir. Bu, light-dark() rengine ayarlanmış devralınan <color> özelliklerinin, alt öğelerine light-dark() ifadesinin kendisini değil, iki renkten yalnızca birini aktaracağı anlamına gelir.

Bunlardan bazıları:

• Devralınan yerleşik renk özellikleri (ör. color, accent-color, fill, stroke, text-shadow, caret-color)
• syntax: <color> ve inherits: true ile kayıtlı devralınabilir özel özellikler
• inherit olarak ayarlanmış diğer tüm <color> mülkleri

Bu nedenle şunları yapmanız gerekir:

• Tasarım jetonlarını (ör. --surface-color) barındırması amaçlanan özel özellikleri <color> olarak kaydetmeyin. Alt öğelerin farklı bir color-scheme altında yeniden çözümlenebilmesi için jetonların light-dark() ifadesini canlı tutması gerekir.
• Bir öğede color-scheme ayarlanırken light-dark() değerlerine (doğrudan veya tasarım jetonları aracılığıyla) ayarlanmış olabilecek devralınan <color> özelliklerini, aynı tasarım jetonuna ayarlanmış olsa bile yeniden belirtin.
• color-scheme geçersiz kılma özelliğine sahip öğelerdeki <color> özelliklerinde inherit KULLANMAYIN (alt öğelerinde kullanılabilir).
• Tersi kullanım alanında kayıtlı <color> özelliklerini KULLANIN: Üst öğenin çözümlenen renginin anlık görüntüsünü kasıtlı olarak almak ve alt öğenin color-scheme öğesi altında yeniden çözümlenmesini önlemek istediğinizde. Örneğin, sayfa arka planını başka bir yerde kullanmak için yakalama.
• Bir rengi canlandırmanız gerekiyorsa canlandırılan öğede ayrı bir @property kayıtlı <color> özelliği kullanın (renk interpolasyonu için kayıt gereklidir). Bu bir tasarım jetonu değil, öğe başına animasyon hedefidir. Bu nedenle yukarıdaki kuralla çelişmez.

Örnek:

:root {
    --accent-color: light-dark(blue, skyblue);
    --surface-color: light-dark(white, #222);
    --text-color: light-dark(#111, white);

    color-scheme: light dark;
    accent-color: var(--accent-color);
    color: var(--text-color);
}

body {
    /* --surface-color dynamically switches despite being inherited because --surface-color is not registered */
    background: var(--surface-color);
}

pre, code {
    color-scheme: dark;
    background: var(--surface-color);

    /* Without this, accent-color would be blue, not skyblue! */
    accent-color: var(--accent-color);

    /* Without this, text-color would be #111, not white! */
    color: var(--text-color);
}

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);
}