Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
// tailwind.config.js — enable class-based dark mode module.exports = { darkMode: 'class', // toggle by adding 'dark' class to <html> content: ['./src/**/*.{html,js,jsx,tsx}'], theme: { extend: {} }, plugins: [], } <!-- Dark mode toggle button (vanilla JS) --> <button id="theme-toggle" class="p-2 rounded-full bg-gray-100 dark:bg-gray-800"> <span class="dark:hidden">🌙</span> <span class="hidden dark:inline">☀️</span> </button> <script> const btn = document.getElementById('theme-toggle'); // Apply saved preference before paint if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { document.documentElement.classList.add('dark'); } btn.addEventListener('click', () => { document.documentElement.classList.toggle('dark'); localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light'; }); </script> <!-- Full page with dark mode pairs --> <body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors"> <header class="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm"> <div class="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between"> <span class="font-bold text-blue-600 dark:text-blue-400">Brand</span> </div> </header> <main class="max-w-3xl mx-auto px-4 py-12"> <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-6 shadow"> <h1 class="text-2xl font-bold mb-3">Dark mode card</h1> <p class="text-gray-600 dark:text-gray-400"> Body text that adapts to the current color scheme automatically. </p> </div> </main> </body>
Result
Open