M

MLOG

Türkçe

Bu kapsamlı rehber ile web sitenizde karanlık modu uygulayın. Kusursuz bir kullanıcı deneyimi için CSS medya sorguları, JavaScript geçişleri, erişilebilirlik ve en iyi uygulamaları öğrenin.

Karanlık Mod Uygulaması: CSS ve JavaScript ile Kapsamlı Bir Rehber

Karanlık mod, özellikle düşük ışıklı ortamlarda daha rahat bir izleme deneyimi sunarak giderek daha popüler hale geldi. Bu rehber, küresel bir kitle için kusursuz ve erişilebilir bir kullanıcı deneyimi sağlayarak web sitenizde CSS ve JavaScript kullanarak karanlık modu nasıl uygulayacağınıza dair kapsamlı bir genel bakış sunmaktadır.

Neden Karanlık Mod Uygulamalıyız?

Karanlık modu uygulamayı düşünmek için birçok geçerli neden vardır:

Karanlık Modu Uygulama Yöntemleri

Karanlık modu uygulamanın her birinin kendi avantajları ve dezavantajları olan birkaç yaklaşımı vardır. En yaygın yöntemleri inceleyeceğiz:

1. CSS Medya Sorguları ile Karanlık Mod Uygulaması

prefers-color-scheme CSS medya sorgusu, kullanıcının tercih ettiği renk şemasını algılamanıza ve buna göre farklı stiller uygulamanıza olanak tanır. Bu, sistem tercihlerini zaten ayarlamış olan kullanıcılar için karanlık modu uygulamanın en basit ve verimli yoludur.

Kod Örneği

Aşağıdaki CSS'i stil dosyanıza ekleyin:

/* Varsayılan (Aydınlık) Tema */
body {
  background-color: #fff;
  color: #000;
}

/* Karanlık Tema */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #fff;
  }
  /* Diğer öğeleri gerektiği gibi ayarlayın */
  h1, h2, h3 {
    color: #ddd;
  }
  a {
    color: #8ab4f8;
  }
}

Açıklama:

Avantajları

Dezavantajları

2. JavaScript Geçişi ile Karanlık Mod Uygulaması

Bir JavaScript geçişi kullanmak, kullanıcılara web sitesinin temasını kontrol etmek için manuel bir anahtar sağlar. Bu, kullanıcılara daha fazla kontrol verir ve sistem tercihlerini geçersiz kılmalarına olanak tanır. Bu yaklaşım, sistem genelinde karanlık mod ayarlarını tutarlı bir şekilde desteklemeyebilecek veya sunmayabilecek çeşitli cihaz ve platformlardaki kullanıcılara hitap etmek için kritik öneme sahiptir.

HTML Yapısı

Öncelikle, HTML'inize bir geçiş öğesi ekleyin:

<label class="switch">
  <input type="checkbox" id="darkModeToggle">
  <span class="slider round"></span>
</label>

Bu, bir onay kutusu ve bazı özel CSS stilleri kullanarak basit bir geçiş anahtarı oluşturur.

CSS Stili (İsteğe Bağlı)

Geçiş anahtarını CSS kullanarak stillendirebilirsiniz. İşte bir örnek:

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Yuvarlak sürgüler */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

JavaScript Kodu

Şimdi, geçiş işlevselliğini yönetmek için aşağıdaki JavaScript kodunu ekleyin:

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// Karanlık modu değiştirmek için fonksiyon
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Kullanıcının tercihini localStorage'da sakla
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Kaydedilmiş tercih için localStorage'ı kontrol et
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Geçiş anahtarına olay dinleyici ekle
darkModeToggle.addEventListener('change', toggleDarkMode);

Açıklama:

Karanlık Mod için CSS Stili (sınıf kullanarak)

Karanlık tema stillerini uygulamak için CSS'inizi dark-mode sınıfını kullanacak şekilde güncelleyin:

/* Varsayılan (Aydınlık) Tema */
body {
  background-color: #fff;
  color: #000;
}

/* Karanlık Tema */
body.dark-mode {
  background-color: #222;
  color: #fff;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {
  color: #ddd;
}

body.dark-mode a {
  color: #8ab4f8;
}

Avantajları

Dezavantajları

3. Medya Sorguları ve JavaScript'i Birleştirme

En iyi yaklaşım genellikle CSS medya sorgularını ve bir JavaScript geçişini birleştirmektir. Bu, her iki dünyanın da en iyisini sunar: kullanıcının tercih ettiği renk şemasının otomatik olarak algılanması ve aynı zamanda kullanıcıların sistem tercihini manuel olarak geçersiz kılmasına olanak tanır. Bu, sistem genelindeki tema ayarlarının farkında olmayan veya değiştiremeyenler de dahil olmak üzere daha geniş bir kitleye hitap eder.

Kod Örneği

JavaScript Geçişi örneğindeki aynı HTML ve CSS'i kullanın. JavaScript'i sistem tercihini kontrol edecek şekilde değiştirin:

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// Karanlık modu değiştirmek için fonksiyon
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Kullanıcının tercihini localStorage'da sakla
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Kaydedilmiş tercih için localStorage'ı, ardından sistem tercihini kontrol et
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Geçiş anahtarına olay dinleyici ekle
darkModeToggle.addEventListener('change', toggleDarkMode);

Açıklama:

Avantajları

Dezavantajları

Erişilebilirlik Hususları

Karanlık modu uygularken, web sitenizin tüm kullanıcılar için kullanılabilir kalmasını sağlamak amacıyla erişilebilirliği göz önünde bulundurmak çok önemlidir. Unutmayın ki sadece renkleri tersine çevirmek otomatik olarak erişilebilirliği garanti etmez. İşte bazı önemli hususlar:

Karanlık Mod Uygulaması için En İyi Uygulamalar

Web sitenizde karanlık modu uygularken izlemeniz gereken bazı en iyi uygulamalar şunlardır:

Örnek: Tema için CSS Değişkenleri

CSS değişkenleri, aydınlık ve karanlık mod temaları arasında geçiş yapmayı kolaylaştırır. Değişkenleri :root sözde sınıfında tanımlayın:

:root {
  --bg-color: #fff;
  --text-color: #000;
  --link-color: #007bff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

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

body.dark-mode {
  --bg-color: #222;
  --text-color: #fff;
  --link-color: #8ab4f8;
}

Artık, dark-mode sınıfı gövdeye eklendiğinde, CSS değişkenleri güncellenir ve stiller otomatik olarak uygulanır.

Sonuç

Karanlık modu uygulamak, web sitenizin kullanıcı deneyimini önemli ölçüde artırabilir, erişilebilirliği iyileştirebilir ve hatta pil ömründen tasarruf sağlayabilir. Bu rehberde özetlenen teknikleri ve en iyi uygulamaları takip ederek, dünya çapındaki kullanıcılarınız için kusursuz ve keyifli bir karanlık mod deneyimi oluşturabilirsiniz.

Web sitenizin, tercihleri veya görsel yetenekleri ne olursa olsun tüm kullanıcılar için kullanılabilir kalmasını sağlamak için erişilebilirliğe öncelik vermeyi ve uygulamanızı kapsamlı bir şekilde test etmeyi unutmayın.

Karanlık modu düşünceli bir şekilde uygulayarak, sadece bir trendi takip etmekle kalmaz, aynı zamanda küresel bir kitle için daha kapsayıcı ve kullanıcı dostu bir web deneyimi yaratırsınız. Kullanıcı deneyimine olan bu adanmışlık, web sitenizin genel performansına ve çekiciliğine büyük ölçüde fayda sağlayabilir.