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.

Tarayıcı arayüzünü özelleştirme

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.

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

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>

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