M

MLOG

Türkçe

Kullanıcı tercihlerine uyum sağlayan, küresel bir kitle için erişilebilirliği ve görsel çekiciliği artıran otomatik açık ve koyu temalar oluşturmak için CSS medya sorgularının ve özel özelliklerin gücünü keşfedin.

CSS Light-Dark Fonksiyonu: Küresel Bir Web için Otomatik Tema Uyarlaması

Günümüzün küresel olarak bağlantılı dünyasında, web sitelerinin farklı geçmişlere ve tercihlere sahip kullanıcılara erişilebilir ve görsel olarak çekici olması gerekir. Bunu başarmanın en etkili yollarından biri, özellikle kullanıcının sistem ayarlarına göre ayarlanan hem açık hem de koyu temalar sunan otomatik tema uyarlamasıdır. Bu blog yazısı, uluslararası kitleniz için sorunsuz ve rahat bir gezinme deneyimi sağlamak üzere CSS medya sorguları ve özel özellikleri kullanarak bu işlevselliği uygulama konusunda size rehberlik edecektir.

Neden Otomatik Açık ve Koyu Temalar Uygulanmalı?

Web projelerinize otomatik tema uyarlamasını dahil etmek için birçok geçerli neden vardır:

CSS ile Otomatik Tema Uyarlaması Nasıl Uygulanır

Otomatik tema uyarlamasının özü, prefers-color-scheme medya sorgusunda yatar. Bu CSS medya sorgusu, kullanıcının tercih ettiği renk şemasını (açık veya koyu) algılamanıza ve ilgili stilleri uygulamanıza olanak tanır.

Adım 1: Özel Özellikleri (CSS Değişkenleri) Tanımlayın

Açık ve koyu temalarınız için renk değerlerini saklamak üzere özel özellikleri (CSS değişkenleri) tanımlayarak başlayın. Bu, sadece değişken değerlerini güncelleyerek temalar arasında geçiş yapmayı kolaylaştırır.


:root {
  --background-color: #ffffff; /* Açık tema arka planı */
  --text-color: #000000; /* Açık tema metni */
  --link-color: #007bff; /* Açık tema bağlantısı */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* Koyu tema arka planı */
    --text-color: #ffffff; /* Koyu tema metni */
    --link-color: #66b3ff; /* Koyu tema bağlantısı */
    --button-background-color: #333;
    --button-text-color: #fff;
  }
}

Bu örnekte, arka plan rengi, metin rengi, bağlantı rengi ve düğme renkleri için değişkenler tanımlıyoruz. :root seçicisi bu değişkenleri tüm belgeye uygular. @media (prefers-color-scheme: dark) medya sorgusu ise kullanıcı sistemini koyu moda ayarladığında bu değişkenleri koyu tema değerleriyle geçersiz kılar.

Adım 2: Özel Özellikleri Stillerinize Uygulayın

Ardından, web sitenizin öğelerinin görünümünü kontrol etmek için bu özel özellikleri CSS stillerinize uygulayın.


body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* Yumuşak geçiş */
}

a {
  color: var(--link-color);
}

button {
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

Burada, özel özelliklerimizin değerlerine erişmek için var() fonksiyonunu kullanıyoruz. Ayrıca temalar arasında yumuşak bir geçiş oluşturmak için body öğesine bir transition özelliği ekledik.

Adım 3: Test Etme ve İyileştirme

Uygulamanızı farklı tarayıcılarda ve işletim sistemlerinde kapsamlı bir şekilde test edin. Chrome, Firefox, Safari ve Edge gibi modern tarayıcılar prefers-color-scheme medya sorgusunu tam olarak destekler. Web sitenizdeki değişiklikleri görmek için işletim sistemi ayarlarınızda açık ve koyu modlar arasında geçiş yapabilirsiniz.

İleri Teknikler ve Dikkat Edilmesi Gerekenler

Manuel Tema Değiştirici Sağlama

Otomatik tema uyarlaması harika bir başlangıç noktası olsa da, bazı kullanıcılar sistem ayarlarını manuel olarak geçersiz kılmayı tercih edebilir. JavaScript ve yerel depolama (local storage) kullanarak manuel bir tema değiştirici sağlayabilirsiniz.

HTML:


<button id="theme-toggle">Temayı Değiştir</button>

JavaScript:


const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

let currentTheme = localStorage.getItem('theme') || 'auto'; // Varsayılan olarak otomatik

function setTheme(theme) {
  if (theme === 'dark') {
    body.classList.add('dark-theme');
    body.classList.remove('light-theme');
  } else if (theme === 'light') {
    body.classList.add('light-theme');
    body.classList.remove('dark-theme');
  } else {
    body.classList.remove('light-theme', 'dark-theme');
  }
  localStorage.setItem('theme', theme);
  currentTheme = theme;
}

// Sayfa yüklendiğinde başlangıç temasını uygula
if (currentTheme === 'dark') {
  setTheme('dark');
} else if (currentTheme === 'light') {
  setTheme('light');
} else {
  //Otomatik olarak ayarlanmışsa, prefers-color-scheme'in karar vermesine izin ver
}


themeToggle.addEventListener('click', () => {
    if (currentTheme === 'auto'){
        setTheme('light');
    } else if (currentTheme === 'light') {
        setTheme('dark');
    } else {
        setTheme('auto');
    }
});

CSS: Önceki CSS ile birlikte aşağıdaki CSS'i ekleyin. Manuel geçersiz kılmaya dikkat edin:


body.light-theme {
  --background-color: #ffffff; /* Açık tema arka planı */
  --text-color: #000000; /* Açık tema metni */
  --link-color: #007bff; /* Açık tema bağlantısı */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

body.dark-theme {
  --background-color: #121212; /* Koyu tema arka planı */
  --text-color: #ffffff; /* Koyu tema metni */
  --link-color: #66b3ff; /* Koyu tema bağlantısı */
  --button-background-color: #333;
  --button-text-color: #fff;
}

Bu kod parçacığı, kullanıcıların açık, koyu ve otomatik temalar arasında geçiş yapmasına olanak tanıyan bir düğme ekler. Seçilen tema, sayfa yüklemeleri arasında kalıcı olması için yerel depolamada saklanır.

Görselleri ve SVG'leri Yönetme

Bazı görseller ve SVG'ler hem açık hem de koyu temalarda iyi görünmeyebilir. Bu varlıkların farklı sürümlerini koşullu olarak görüntülemek için CSS medya sorgularını kullanabilirsiniz.


img.light-mode {
  display: block;
}

img.dark-mode {
  display: none;
}

@media (prefers-color-scheme: dark) {
  img.light-mode {
    display: none;
  }

  img.dark-mode {
    display: block;
  }
}

Bu kod parçacığı, açık modda bir görseli (light-mode sınıfıyla) ve koyu modda farklı bir görseli (dark-mode sınıfıyla) gösterir.

Uluslararası Kitleler için Renk Paleti Değerlendirmeleri

Açık ve koyu temalarınız için renk paletleri seçerken, kültürel ilişkilendirmelere ve erişilebilirlik hususlarına dikkat edin. İşte bazı genel yönergeler:

Performans Değerlendirmeleri

Otomatik tema uyarlamasını uygulamak nispeten basit olsa da, performans üzerindeki potansiyel etkisini göz önünde bulundurmak önemlidir. Oluşturmayı yavaşlatabilecek aşırı karmaşık CSS seçicilerinden veya animasyonlardan kaçının. Ayrıca, değişken aramalarının ek yükünü en aza indirmek için özel özelliklerinizin verimli bir şekilde tanımlandığından emin olun.

Performansı optimize etmek için bazı en iyi uygulamalar şunlardır:

Erişilebilirlik En İyi Uygulamaları

Açık ve koyu temalarınızın WCAG (Web İçeriği Erişilebilirlik Yönergeleri) gibi erişilebilirlik yönergelerini karşıladığından emin olun. Bu, yeterli renk kontrastı sağlamayı, anlamsal HTML kullanmayı ve tüm etkileşimli öğelerin klavyeyle erişilebilir olmasını sağlamayı içerir.

İzlenmesi gereken bazı özel erişilebilirlik en iyi uygulamaları şunlardır:

Farklı Bölgelerden Örnekler

Açık ve koyu temaların çeşitli küresel kitleler için nasıl uyarlanabileceğine dair bu örnekleri göz önünde bulundurun:

Sonuç

Otomatik açık ve koyu temaları uygulamak, küresel bir kitle için daha erişilebilir ve kullanıcı dostu bir web deneyimi yaratmaya yönelik çok önemli bir adımdır. CSS medya sorgularından ve özel özelliklerden yararlanarak, web sitenizin görünümünü kullanıcı tercihlerine uyacak şekilde kolayca uyarlayabilir, göz yorgunluğunu azaltabilir ve görme bozukluğu olan kullanıcılar için erişilebilirliği artırabilirsiniz. Herkes için sorunsuz ve kapsayıcı bir gezinme deneyimi sağlamak için kültürel ilişkilendirmeleri, erişilebilirlik yönergelerini ve performans hususlarını dikkate almayı unutmayın.

Bu teknikleri benimseyerek, modern web tasarım ilkelerine olan bağlılığınızı gösterir ve uluslararası kitlenizin çeşitli ihtiyaçlarına cevap vererek web sitenizi herkes için davetkar ve konforlu bir alan haline getirirsiniz.