HomeDark Mode
Preview
js
--bg
--text
--accent
Code
js
// tailwind.config.js
module.exports = {
  darkMode: 'class', // veya 'media'
  theme: { extend: {} },
}

// Toggle
function toggleDark() {
  document.documentElement.classList.toggle('dark');
  localStorage.setItem(
    'theme',
    document.documentElement.classList.contains('dark') ? 'dark' : 'light'
  );
}

// Initial load
if (localStorage.theme === 'dark' ||
  (!localStorage.theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark');
}
Related Blocks
js
System Preference Detection
Read system theme with matchMedia.
js
Toggle Implementation
Persistent dark/light switch with localStorage.
css
CSS Variables Dark Mode
Automatic color switching with prefers-color-scheme.