HomeDark Mode
Preview
js
Code
js
// Apply theme on page load
const theme = localStorage.getItem('theme')
  ?? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', theme);

// Toggle butonu
function toggleTheme() {
  const current = document.documentElement.getAttribute('data-theme');
  const next = current === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', next);
  localStorage.setItem('theme', next);
}

/* CSS */
/* [data-theme="dark"] { --bg: #0D0C0A; --text: #F2EDE4; }
   [data-theme="light"] { --bg: #F8F7F4; --text: #1C1A17; } */
Related Blocks
js
System Preference Detection
Read system theme with matchMedia.
js
Tailwind Dark Mode
Class-based dark mode setup for Tailwind.
css
CSS Variables Dark Mode
Automatic color switching with prefers-color-scheme.