| fatal | 09 Mayıs 2025 09:20 |
Cevap: Karanlık Mod (Dark Mode) Geçişi – HTML/CSS/JS ile Basit Uygulama
Alıntı:
Nefret Nickli Üyeden Alıntı
(Mesaj 1043017731)
Merhaba arkadaşlar,
Bugün sizlerle çok basit ama web siteleri için oldukça yararlı olan bir "karanlık mod geçişi" örneği paylaşıyorum. Tamamen HTML, CSS ve JavaScript ile yazıldı. Yeni başlayanlar için faydalı olabilir diye düşündüm. Geliştirme önerilerine ve geri bildirimlere açığım Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Karanlık Mod</title>
<style>
body {
background-color: white;
color: black;
font-family: sans-serif;
text-align: center;
padding-top: 50px;
transition: background-color 0.3s, color 0.3s;
}
body.dark-mode {
background-color: #121212;
color: #f0f0f0;
}
button {
padding: 10px 20px;
margin-top: 20px;
cursor: pointer;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Karanlık Mod Örneği</h1>
<button id="toggleBtn">Modu Değiştir</button>
<script>
document.getElementById("toggleBtn").addEventListener("click", function () {
document.body.classList.toggle("dark-mode");
});
</script>
</body>
</html>
| Paylaşım için teşekkürler.
Biraz daha gelişmiş halini aşağıda paylaşıyorum.
Farklı ekran boyutlarına uyumlu hale getirildi.
Tüm renkler CSS değişkenlerine bağlandı.
Kullanıcı tercihleri tarayıcıda saklanıyor.
Kullanıcının işletim sisteminin tercih ettiği tema otomatik algılanabiliyor.
Mavi, yeşil, mor ve kırmızı olmak üzere 4 farklı renk teması eklendi.
Kart bileşenleri, buton hover efektleri ve daha profesyonel bir arayüze geçildi.
Tüm geçişler yumuşak animasyonlarla desteklendi. Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Gelişmiş Karanlık Mod</title>
<style>
:root {
--bg-color: white;
--text-color: black;
--btn-bg: #f0f0f0;
--btn-text: #333;
--btn-hover: #e0e0e0;
--card-bg: #f8f8f8;
--border-color: #ddd;
}
.dark-mode {
--bg-color: #121212;
--text-color: #f0f0f0;
--btn-bg: #333;
--btn-text: #f0f0f0;
--btn-hover: #444;
--card-bg: #1e1e1e;
--border-color: #444;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
padding: 20px;
transition: all 0.3s ease;
min-height: 100vh;
margin: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
margin-bottom: 30px;
}
button {
padding: 12px 24px;
margin: 10px;
cursor: pointer;
font-size: 16px;
background-color: var(--btn-bg);
color: var(--btn-text);
border: none;
border-radius: 6px;
transition: all 0.2s;
}
button:hover {
background-color: var(--btn-hover);
transform: translateY(-2px);
}
.card {
background-color: var(--card-bg);
border-radius: 10px;
padding: 20px;
margin: 20px 0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border: 1px solid var(--border-color);
}
.settings {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.theme-selector {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.theme-btn {
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
border: 2px solid var(--border-color);
}
.blue-theme { background: linear-gradient(135deg, #1e3c72, #2a5298); }
.green-theme { background: linear-gradient(135deg, #11998e, #38ef7d); }
.purple-theme { background: linear-gradient(135deg, #4776E6, #8E54E9); }
.red-theme { background: linear-gradient(135deg, #ED213A, #93291E); }
footer {
margin-top: 40px;
padding: 20px;
font-size: 14px;
color: var(--text-color);
opacity: 0.8;
}
</style>
</head>
<body>
<div class="container">
<h1>Gelişmiş Tema Yönetimi</h1>
<div class="settings">
<button id="toggleBtn">Tema Değiştir</button>
<button id="systemPref">Sistem Ayarlarına Uyum Sağla</button>
</div>
<div class="card">
<h2>Örnek İçerik</h2>
<p>Bu bir demo görünümdür. Tema değiştirildiğinde nasıl göründüğünü gözlemleyebilirsiniz.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p>
</div>
<div class="theme-selector">
<div class="theme-btn blue-theme" data-theme="blue"></div>
<div class="theme-btn green-theme" data-theme="green"></div>
<div class="theme-btn purple-theme" data-theme="purple"></div>
<div class="theme-btn red-theme" data-theme="red"></div>
</div>
<footer>
Tema ayarlarınız tarayıcıda saklanır. | © fatal.
</footer>
</div>
<script>
const toggleBtn = document.getElementById('toggleBtn');
const systemPrefBtn = document.getElementById('systemPref');
const themeButtons = document.querySelectorAll('.theme-btn');
const body = document.body;
// Kullanıcı tercihini kontrol et (localStorage)
const currentTheme = localStorage.getItem('theme') || 'light';
const currentColor = localStorage.getItem('color') || 'default';
// Başlangıç temasını ayarla
if (currentTheme === 'dark') body.classList.add('dark-mode');
applyColorTheme(currentColor);
// Tema değiştirme butonu
toggleBtn.addEventListener('click', function() {
body.classList.toggle('dark-mode');
const theme = body.classList.contains('dark-mode') ? 'dark' : 'light';
localStorage.setItem('theme', theme);
});
// Sistem temasına uyum sağlama
systemPrefBtn.addEventListener('click', function() {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
body.classList.toggle('dark-mode', prefersDark);
localStorage.setItem('theme', prefersDark ? 'dark' : 'light');
});
// Renk temaları
themeButtons.forEach(button => {
button.addEventListener('click', function() {
const themeColor = this.getAttribute('data-theme');
applyColorTheme(themeColor);
localStorage.setItem('color', themeColor);
});
});
function applyColorTheme(color) {
// Renk temasına göre özel CSS değişkenleri ayarla
if (color === 'blue') {
document.documentElement.style.setProperty('--btn-bg', '#1e3c72');
document.documentElement.style.setProperty('--btn-hover', '#2a5298');
} else if (color === 'green') {
document.documentElement.style.setProperty('--btn-bg', '#11998e');
document.documentElement.style.setProperty('--btn-hover', '#38ef7d');
} else if (color === 'purple') {
document.documentElement.style.setProperty('--btn-bg', '#4776E6');
document.documentElement.style.setProperty('--btn-hover', '#8E54E9');
} else if (color === 'red') {
document.documentElement.style.setProperty('--btn-bg', '#ED213A');
document.documentElement.style.setProperty('--btn-hover', '#93291E');
} else {
// Varsayılan tema
document.documentElement.style.setProperty('--btn-bg', '');
document.documentElement.style.setProperty('--btn-hover', '');
}
}
// Sistem teması değişikliklerini dinle
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
if (localStorage.getItem('theme') === 'system') {
body.classList.toggle('dark-mode', e.matches);
}
});
</script>
</body>
</html>
|
