- Katılım
- 19 Ocak 2024
- Mesajlar
- 160
- Tepkime puanı
- 11
- Puanları
- 18
- Ödüller
- 6
CSS ile Gece Modu (Dark Mode) Tasarımı
Karanlık mod, modern web tasarımında sıkça kullanılan ve kullanıcıların ilgisini çeken bir özelliktir. Göz yorgunluğunu azaltmak ve kullanıcı deneyimini iyileştirmek için birçok uygulama ve web sitesi bu özelliği sunmaktadır. İşte CSS kullanarak basit bir gece modu tasarımı yapmanın örneği:
CSS Gece Modu Stilleri
Gece modu için uygun renk paletleri kullanarak sayfa stilinizi oluşturabilirsiniz.
CSS:
body {
background-color: #121212;
color: #e0e0e0;
font-family: Arial, sans-serif;
padding: 20px;
}
button {
background-color: #1f1f1f;
color: #e0e0e0;
border: 1px solid #333;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #333;
}HTML Yapısı:
HTML:
<div>
<h1>Gece Modu Örneği</h1>
<p>Bu, gece modu için hazırlanmış basit bir CSS tasarımıdır.</p>
<button>Buton</button>
</div>Gece Modu Geçişi (JavaScript ile) Eklemek
Kullanıcıların bir düğme ile gece modu ve gündüz modu arasında geçiş yapmasını sağlamak için JavaScript kullanılabilir.
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Gece Modu Geçişi</title>
<style>
body {
transition: background-color 0.3s ease, color 0.3s ease;
}
.dark-mode {
background-color: #121212;
color: #e0e0e0;
}
.light-mode {
background-color: #ffffff;
color: #000000;
}
button {
background-color: #007BFF;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 20px;
}
</style>
</head>
<body class="light-mode">
<h1>Gece Modu Geçişi</h1>
<p>Bu, gece modu ve gündüz modu arasında geçiş yapmayı sağlayan bir örnektir.</p>
<button onclick="toggleMode()">Mod Değiştir</button>
<script>
function toggleMode() {
document.body.classList.toggle('dark-mode');
document.body.classList.toggle('light-mode');
}
</script>
</body>
</html>Gece Modu Tasarımının Avantajları
1. Göz yorgunluğunu azaltır.
2. OLED ekranlarda enerji tasarrufu sağlar.
3. Gece saatlerinde daha rahat bir kullanıcı deneyimi sunar.
Gece modu, kullanıcı deney
imini iyileştirmenin yanı sıra, modern tasarım estetiği için de oldukça popüler bir seçenektir.
