Web Sitesi Dark Mode Nasıl Yapılır? Karanlık Tema Tasarım Rehberi

### Web Sitesi Dark Mode Nasıl Yapılır? Karanlık Tema Tasarım Rehberi

Bu Yazıda Neler Öğreneceksiniz?
- Dark mode'un ne olduğu ve neden önemli olduğu
- HTML ve CSS ile basit bir karanlık tema nasıl oluşturulur?
- JavaScript kullanarak kullanıcı tercihlerini nasıl kaydedebilirsiniz?
- Mevcut bir web sitesine dark mode entegrasyonunun adımları

Günümüzde kullanıcı deneyimini artırmak ve göz yorgunluğunu azaltmak için dark mode, yani karanlık tema, birçok web sitesi ve uygulama tarafından tercih edilmektedir. Bu rehberde, bir web sitesinde karanlık tema oluşturmanın adımlarını detaylı bir şekilde inceleyeceğiz. Hem estetik açıdan hoş bir görünüm elde edeceğiz hem de kullanıcı dostu bir deneyim sunacağız.

#### Dark Mode Nedir?

Dark mode, kullanıcı arayüzlerinde açık renklerin yerine koyu renklerin kullanıldığı bir tasarım yaklaşımıdır. Özellikle düşük ışık koşullarında göz yorgunluğunu azaltır ve pil tasarrufu sağlar. Kullanıcılar, gözlerinin daha az yorulması ve daha iyi bir okuma deneyimi için bu tercihi sıkça yapmaktadır.

#### Karanlık Tema Oluşturma

Karanlık tema tasarımı için yapmamız gereken temel adımlar şunlardır:

1. HTML Yapısı:
- Basit bir HTML sayfası oluşturun.
- Temel öğeleri ekleyin: başlık, içerik, butonlar vb.

```html
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karanlık Tema Örneği</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Karanlık Tema Örneği</h1>
<button id="theme-toggle">Temayı Değiştir</button>
</header>
<main>
<p>Bu, karanlık tema örneğidir.</p>
</main>
<script src="script.js"></script>
</body>
</html>
```

2. CSS ile Karanlık Tema Stili:
- CSS dosyasında, hem normal hem de karanlık tema için stiller oluşturun.

```css
/ styles.css /
body {
font-family: Arial, sans-serif;
transition: background-color 0.3s ease, color 0.3s ease;
}

body.light {
background-color: white;
color: black;
}

body.dark {
background-color: #121212;
color: white;
}

header {
padding: 10px;
text-align: center;
}

button {
padding: 10px;
cursor: pointer;
}
```

3. JavaScript ile Tema Değişimi:
- Kullanıcının tema tercihine göre sayfanın stilini değiştirecek bir JavaScript fonksiyonu ekleyin.

```javascript
// script.js
const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

// Tema tercihini kontrol et
if (localStorage.getItem('theme') === 'dark') {
body.classList.add('dark');
} else {
body.classList.add('light');
}

// Butona tıklama olayı
themeToggle.addEventListener('click', () => {
body.classList.toggle('dark');
body.classList.toggle('light');

// Temayı yerel depolama (localStorage) ile kaydet
if (body.classList.contains('dark')) {
localStorage.setItem('theme', 'dark');
} else {
localStorage.setItem('theme', 'light');
}
});
```

#### Kullanıcı Tercihlerini Kaydetme

Yukarıdaki JavaScript kodunda, kullanıcının seçtiği tema tercihi yerel depolama (localStorage) kullanılarak kaydedilmektedir. Bu sayede kullanıcı sayfayı yeniden yüklediğinde, tercih ettiği tema otomatik olarak uygulanır.

### Sonuç

Web sitenizde karanlık tema uygulamak, kullanıcı deneyimini iyileştirmek için oldukça etkili bir yöntemdir. Bu rehberdeki adımları takip ederek, basit bir HTML sayfasına dark mode entegrasyonu gerçekleştirebilirsiniz. Tasarımınızı geliştirirken, kullanıcıların tercihlerini göz önünde bulundurmayı unutmayın, böylece daha etkili ve kullanıcı dostu bir deneyim sunmuş olursunuz.

#### Sık Sorulan Sorular

1. Dark mode tüm tarayıcılarla uyumlu mu?
- Evet, modern tarayıcıların çoğu dark mode desteği sunmaktadır.

2. Karanlık tema tasarımı göz sağlığına iyi gelir mi?
- Evet, düşük ışıkta göz yorgunluğunu azaltır.

3. Dark mode'u nasıl güncelleyebilirim?
- CSS ve JavaScript dosyalarınızı düzenleyerek tasarımınızı güncelleyebilirsiniz.