Dark Mode with OS Preference

This page's background and text color will change if your operating system or browser is set to dark mode.

This inner box also uses `dark:` variants. In light mode, it's light slate. In dark mode, it's darker slate.

Gotcha Consideration:

While this OS-preference mode works out-of-the-box with the Tailwind CDN for basic `dark:` variants, if you wanted to provide a manual toggle (e.g., a button) instead of relying solely on OS settings, you would typically use the `darkMode: 'class'` strategy. This strategy requires:

  1. Setting darkMode: 'class' in your tailwind.config.js file (not applicable when using only the CDN, but crucial for compiled projects).
  2. Using JavaScript to add or remove a 'dark' class from the <html> element.

The next example will demonstrate the `darkMode: 'class'` approach.