CSS Variables (Değişkenler) ile Tema Sistemi

CSS değişkenleri ile dinamik tema sistemi oluşturmak artık çok kolay!

CSS değişkenleri tanımlama

/* (c) CodeMareFi - codemarefi.com.tr */
:root {
  --renk-ana: #e60000;
  --renk-arkaplan: #0a0a0a;
  --renk-yazi: #ffffff;
  --renk-ikincil: #1a1a1a;
  --bosluk-kucuk: 8px;
  --bosluk-orta: 16px;
  --bosluk-buyuk: 32px;
  --yari-cerceve: 8px;
}

/* Acik tema */
[data-tema="acik"] {
  --renk-arkaplan: #ffffff;
  --renk-yazi: #0a0a0a;
  --renk-ikincil: #f5f5f5;
}

/* Kullanim */
.kart {
  background: var(--renk-ikincil);
  color: var(--renk-yazi);
  padding: var(--bosluk-orta);
  border-radius: var(--yari-cerceve);
  border: 1px solid var(--renk-ana);
}

JavaScript ile Tema Değiştirme

// (c) CodeMareFi - codemarefi.com.tr
function temaDegistir() {
  const html = document.documentElement;
  const mevcutTema = html.getAttribute('data-tema');
  const yeniTema = mevcutTema === 'acik' ? 'karanlik' : 'acik';
  html.setAttribute('data-tema', yeniTema);
  localStorage.setItem('tema', yeniTema);
}