Dark Mode: Class-Based (JS Toggle)

This page demonstrates setting up a class-based dark mode toggle.

Important: The "Gotcha"

For the `dark:` prefixed utility classes (e.g., `dark:bg-gray-800`, `dark:text-white`) on elements below to work when you click the toggle button, your Tailwind CSS configuration (`tailwind.config.js`) MUST include darkMode: 'class' .

When using only the Tailwind CDN (like in this standalone example), it's typically pre-configured for `darkMode: 'media'` (OS preference). So, toggling the 'dark' class on the ` ` element with JavaScript might not make Tailwind's `dark:` variants apply as expected unless the CDN itself was built with `darkMode: 'class'`. This example primarily illustrates the JavaScript and HTML structure for a class-based toggle in a full project setup. If your OS is in dark mode, some `dark:` styles might appear due to the 'media' strategy, not this toggle.

Content Box 1

This box uses `bg-gray-100 dark:bg-gray-800`. Its text will become `dark:text-gray-300`. This change depends on the 'dark' class on ` ` AND the correct `tailwind.config.js` setup.

Content Box 2

Styled with `bg-indigo-100 dark:bg-indigo-800`. This also requires `darkMode: 'class'` in your config for the toggle to control its appearance.