Tema oluşturma

Marka bilinci oluşturma stratejisi bile duyarlı olabilir. Web sitenizin sunumunu, kullanıcının tercihine uyacak şekilde ayarlayabilirsiniz. Ancak öncelikle, web sitenizin markasını tarayıcının kendisini içerecek şekilde nasıl genişleteceğinize değineceğiz.

Bazı tarayıcılar, web sitenizin paletine dayalı bir tema rengi önermenize izin verir. Tarayıcının arayüzü, önerdiğiniz renge uyum sağlar. Rengi sayfalarınızın head bölümünde theme-color adlı bir meta öğesine ekleyin.

<meta name="theme-color" content="#00D494">
. ziyaret edin.
Netleft nokta com. Dayanıklı Web Tasarımı nokta com. Oturum nokta kuruluşu.
Safari tarayıcıda üç web sitesi görüntüleniyor. Her birinin, tarayıcı arayüzüne yayılan kendi tema rengi vardır.

theme-color değerini JavaScript kullanarak güncelleyebilirsiniz. Ancak bu gücü akıllıca kullanın. Tarayıcılarının renk şeması çok sık değişirse kullanıcılar da bunaltıcı gelebilir. Tema rengini düzenlemenin incelikli yollarını düşünün. Değişiklikler çok rahatsız edici olursa kullanıcılar rahatsız olur.

Web uygulaması manifest dosyasında da tema rengi belirtebilirsiniz. Bu, web sitenizle ilgili meta verileri içeren bir JSON dosyasıdır.

Dokümanlarınızın head bölümünden manifest dosyasına bağlantı oluşturun. rel değeri manifest olan bir link öğesi kullanın.

<link rel="manifest" href="/manifest.json">

Manifest dosyasında, meta verilerinizi anahtar/değer çiftlerini kullanarak listeleyin.

{
 
"short_name": "Clearleft",
 
"name": "Clearleft design agency",
 
"start_url": "/",
 
"background_color": "#00D494",
 
"theme_color": "#00D494",
 
"display": "standalone"
}

Bir ziyaretçi web sitenizi ana ekranına eklemeye karar verirse tarayıcı, uygun bir kısayolu görüntülemek için manifest dosyanızdaki bilgileri kullanır.

Koyu mod sağla

Birçok işletim sistemi, kullanıcıların bir açık veya koyu renk paleti için tercih belirtmesine olanak tanır. Bu da sitenizi kullanıcının tema tercihlerine göre optimize etmek için iyi bir fikirdir. Bu tercihe prefers-color-scheme adlı medya özelliğinden erişebilirsiniz.

@media (prefers-color-scheme: dark) {
 
// Styles for a dark theme.
}

Tema renklerini, meta öğesindeki prefers-color-scheme medya özelliğini kullanarak belirtin.

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">

SVG'nin içindeki prefers-color-scheme medya özelliğini de kullanabilirsiniz. Site simgeniz için bir SVG dosyası kullanıyorsanız bu dosya koyu moda göre ayarlanabilir. Thomas Steiner'ın Koyu mod simgeleri için SVG site simgelerinde prefers-color-scheme.

Özel özelliklerle tema oluşturma

CSS'nizin tamamındaki birden çok yerde aynı renk değerlerini kullanıyorsanız tüm seçicilerinizi bir prefers-color-scheme medya sorgusu içinde tekrarlamak çok yorucu olabilir.

body {
 
background-color: white;
 
color: black;
}
input
{
 
background-color: white;
 
color: black;
 
border-color: black;
}
button
{
 
background-color: black;
 
color: white;
}
@media (prefers-color-scheme: dark) {
  body
{
   
background-color: black;
   
color: white;
 
}
  input
{
   
background-color: black;
   
color: white;
   
border-color: white;
 
}
  button
{
   
background-color: white;
   
color: black;
 
}
}

Renk değerlerinizi depolamak için CSS özel özelliklerini kullanın. Özel mülkler, bir programlama dilindeki değişkenler gibi çalışır. Bir değişkenin değerini, adını güncellemeden güncelleyebilirsiniz.

prefers-color-scheme medya sorgusu içindeki özel özelliklerinizin değerlerini güncellerseniz tüm seçicilerinizi iki kez yazmanız gerekmez.

html {
 
--page-color: white;
 
--ink-color: black;
}
@media (prefers-color-scheme: dark) {
  html
{
   
--page-color: black;
   
--ink-color: white;
 
}
}
body
{
 
background-color: var(--page-color);
 
color: var(--ink-color);
}
input
{
 
background-color: var(--page-color);
 
color: var(--ink-color);
 
border-color: var(--ink-color);
}
button
{
 
background-color: var(--ink-color);
 
color: var(--page-color);
}

Özel özelliklerle tema oluşturma hakkında daha gelişmiş örnekler için renk şeması oluşturma konusuna bakın.

Resimler

HTML'nizde SVG kullanıyorsanız özel özellikleri de oradan uygulayabilirsiniz.

svg {
 
stroke: var(--ink-color);
 
fill: var(--page-color);
}

Artık simgeleriniz, sayfanızdaki diğer öğelerle birlikte renklerini değiştirir.

Koyu modda görüntülenirken fotoğraf görüntülerinizin parlaklığını azaltmak istiyorsanız CSS'de bir filtre uygulayabilirsiniz.

@media (prefers-color-scheme: dark) {
  img
{
   
filter: brightness(.8) contrast(1.2);
 
}
}
Normal parlaklıkta üç fotoğraf. Biraz daha az parlaklığa sahip üç fotoğraf.
Efekt hafiftir, ancak koyu modda görüntülerin parlaklığını azaltabilirsiniz.

Bazı resimleri koyu modda tamamen değiştirebilirsiniz. Örneğin, daha koyu renk şemasına sahip bir harita göstermek isteyebilirsiniz. <source> öğesi içeren <picture> öğesini prefers-color-scheme medya sorgusuyla kullanın.

<picture>
 
<source srcset="darkimage.png" media="(prefers-color-scheme: dark)">
 
<img src="lightimage.png" alt="A description of the image.">
</picture>
Birinde açık renkler, diğerinde koyu renkler kullanılan iki Broolyn haritası.
Biri açık mod, diğeri koyu mod için olmak üzere aynı haritanın iki sürümü.

Formlar

Tarayıcılar, form alanları için varsayılan bir renk paleti sağlar. Tarayıcıya, sitenizde hem koyu hem de açık mod sunduğunu bildirin. Bu şekilde, tarayıcı formlar için uygun varsayılan stilleri sağlayabilir.

CSS'nize şunu ekleyin:

html {
 
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html
{
   
color-scheme: dark;
 
}
}

HTML de kullanabilirsiniz. Dokümanlarınızın head bölümüne bunu ekleyin:

<meta name="supported-color-schemes" content="light dark">

Onay kutularının, radyo düğmelerinin ve diğer bazı form alanlarının stilini belirlemek için CSS'de accent-color özelliğini kullanın.

html {
 
accent-color: red;
}

Koyu temalarda ise daha soluk marka renklerinin bulunması sık karşılaşılan bir durumdur. Koyu mod için accent-color değerini güncelleyebilirsiniz.

html {
 
accent-color: red;
}
@media (prefers-color-scheme: dark) {
  html
{
   
accent-color: pink;
 
}
}

Bunun için özel bir özellik kullanmak mantıklıdır. Böylece tüm renk beyanlarınızı tek bir yerde tutabilirsiniz.

html {
 
color-scheme: light;
 
--page-color: white;
 
--ink-color: black;
 
--highlight-color: red;
}
@media (prefers-color-scheme: dark) {
  html
{
   
color-scheme: dark;
   
--page-color: black;
   
--ink-color: white;
   
--highlight-color: pink;
 
}
}
html
{
 
accent-color: var(--highlight-color);
}
body
{
 
background-color: var(--page-color);
 
color: var(--ink-color);
}

Koyu mod sağlamak, sitenizi kullanıcılarınızın tercihlerine uyacak şekilde uyarlamaya ilişkin örneklerden yalnızca biridir. Ardından, sitenizi her türlü erişilebilirlik açısından nasıl uyumlu hale getirebileceğinizi öğreneceksiniz.

Öğrendiklerinizi sınayın

Tema belirlemeyle ilgili bilginizi test edin

Tarayıcıyı web sayfası dışında etkileyen tema renkleri sağlamak için şunları kullanın:

Web uygulaması manifesti
"Tema rengi" <meta> etiket
JavaScript
CSS

Kullanıcının açık veya koyu temayla ilgili sistem tercihini belirlemek için şunu kullanın:

JavaScript
(prefers-color-scheme) medya sorgusu

Bu nedenle koyu temayı destekliyorsunuz ancak formdaki tüm girişler açık temaya sahip. Yapabilecekleriniz

HTML <head> etiketinize <meta name="supported-color-schemes" content="light dark"> ekleyin.
Girişin tüm varsayılan değerlerini değiştirmek için bir dizi CSS yazın.
CSS'nize html { color-scheme: light dark; } ekleyin.