color-scheme (CSS)

color-scheme (CSS)
color-scheme (CSS)

color-scheme, web sitelerinin tasarımında kullanılan renk paletlerinin yönetimi için kullanılan bir özelliktir. Bu özellik, bir web sayfasının renk şemasını kolayca değiştirebilmenizi sağlar.

color-scheme, web tasarımında birkaç farklı şekilde kullanılabilir; witesindeki tüm text renklerini, arka plan renklerini ve diğer öğelerin renklerini değiştirebilirsiniz. Ayrıca, farklı renk şemalarını kullanarak web sitenize farklı bir hissiyat ve stil verebilirsiniz.

CSS color-scheme, birkaç farklı özellik ile kullanılabilir.

  • auto: Bu anahtar kelime, tarayıcının varsayılan renk şemasını kullanmasını sağlar. Bu, genellikle kullanıcının tarayıcı ayarlarına bağlıdır.
  • light: Bu anahtar kelime, daha açık tonlarda bir renk şeması kullanmanızı sağlar.
  • dark: Bu anahtar kelime, daha koyu tonlarda bir renk şeması kullanmanızı sağlar.
  • normal: Bu anahtar kelime, standart bir renk şeması kullanmanızı sağlar.

color-scheme ayrıca, custom bir renk şeması kullanmanıza da izin verir. Bu, özellikle marka kimliğinize uygun bir renk paleti oluşturmak istediğinizde faydalı olabilir.

Şöyle bir senaryo düşünelim: bir blog sitesinde farklı kategorilerdeki yazıların farklı renk şemaları kullanmasını istiyoruz. Teknoloji yazıları mavi bir renk şeması kullanacakken, spor yazıları yeşil bir renk şeması kullanacak.

<body class="category-tech">
  <header>
    <h1>Blog Adı</h1>
    <nav>
      <ul>
        <li><a href="#" class="category-tech">Teknoloji</a></li>
        <li><a href="#" class="category-sports">Spor</a></li>
      </ul>
    </nav>
  </header>
<main>
    <article>
      <h2>Yazı Başlığı</h2>
      <p>Bu bir teknoloji yazısıdır.</p>
    </article>
    <article>
      <h2>Yazı Başlığı</h2>
      <p>Bu bir teknoloji yazısıdır.</p>
    </article>
  </main>
</body>

Burada, body etiketinde category-tech class’ını kullanarak sayfamızın varsayılan renk şemasını yazalım.

body.category-tech {
  --background-color: #f2f2f2;
  --text-color: #333;
  --link-color: #00bcd4;
}
body.category-sports {
  --background-color: #e5f5e0;
  --text-color: #333;
  --link-color: #4caf50;
}
body {
  background-color: var(--background-color);
  color: var(--text-color);
}
a {
  color: var(--link-color);
  text-decoration: none;
}

Burada, body etiketi için farklı sınıflarla ayrılmış iki farklı renk şeması tanımladık. --background-color--text-color ve --link-color gibi özel değişkenler kullanarak, renkleri tek bir yerde belirleyebiliriz.

Son olarak, bodya ve diğer etiketlerde bu özel değişkenleri kullanarak, sayfamızın renk şemasını değiştirdik.

Bu örnekte, farklı renk şemalarını sınıf kullanarak tanımladık ve özel CSS değişkenleriyle renkleri belirledik. Bu sayede, farklı kategorilerdeki yazılar için farklı renk şemaları oluşturduk.