CSS değişkenleri tanımlama, kullanma ve JavaScript ile değiştirme.
CSS değişkenleri (custom properties) tekrar eden değerleri tek yerden yönetmenizi sağlar. Renk paleti, tipografi ve boşluklar için idealdir.
Belgenin en üst elementi olan html'e karşılık gelir. Burada tanımlanan değişkenler sayfanın her yerinde kullanılabilir.
CSS değişkenleri ile koyu tema yapmak çok kolaydır. Body'e dark class eklenince tüm değişkenler değişir, başka bir şeye dokunmaya gerek kalmaz.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<style>
/* Açık tema değişkenleri */
:root {
--renk-arkaplan: #ffffff;
--renk-yuzey: #f8fafc;
--renk-kenarlık: #e2e8f0;
--renk-metin: #1e293b;
--renk-metin-2: #64748b;
--renk-vurgu: #6366f1;
--renk-basari: #10b981;
--renk-hata: #ef4444;
--yariçap: 8px;
--yariçap-lg: 16px;
--golge: 0 2px 8px rgba(0,0,0,0.08);
--font-ana: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--bosluk-s: 8px;
--bosluk-m: 16px;
--bosluk-l: 24px;
--bosluk-xl: 48px;
}
/* Koyu tema */
body.karanlik {
--renk-arkaplan: #0f172a;
--renk-yuzey: #1e293b;
--renk-kenarlık: #334155;
--renk-metin: #f1f5f9;
--renk-metin-2: #94a3b8;
}
/* Kullanım */
body {
background: var(--renk-arkaplan);
color: var(--renk-metin);
font-family: var(--font-ana);
transition: background 0.3s, color 0.3s;
padding: 20px;
}
.kart {
background: var(--renk-yuzey);
border: 1px solid var(--renk-kenarlık);
border-radius: var(--yariçap-lg);
padding: var(--bosluk-l);
box-shadow: var(--golge);
max-width: 400px;
margin: 0 auto;
}
h2 { color: var(--renk-vurgu); margin-bottom: var(--bosluk-m); }
p { color: var(--renk-metin-2); line-height: 1.7; }
.tema-btn {
display: block;
margin: 20px auto;
padding: 10px 24px;
background: var(--renk-vurgu);
color: white;
border: none;
border-radius: var(--yariçap);
cursor: pointer;
font-size: 14px;
}
</style>
</head>
<body>
<div class="kart">
<h2>CSS Değişkenleri</h2>
<p>Değişkenler sayesinde koyu tema tek tuşla değişiyor. Tüm renkler tek yerden yönetiliyor.</p>
</div>
<button class="tema-btn" onclick="temaDegistir()">🌙 Temayı Değiştir</button>
<script>
function temaDegistir() {
document.body.classList.toggle('karanlik');
// JavaScript ile değişken değiştirme
var btn = document.querySelector('.tema-btn');
if (document.body.classList.contains('karanlik')) {
btn.textContent = '☀ Açık Temaya Geç';
document.documentElement.style.setProperty('--renk-vurgu', '#818cf8');
} else {
btn.textContent = '🌙 Koyu Temaya Geç';
document.documentElement.style.setProperty('--renk-vurgu', '#6366f1');
}
}
</script>
</body>
</html>