Dark theme ?

[Mikaleb]

Hi, is the dark mode options available ?

[jeffreyvr]

You should be able to use it as documented here: https://tailwindcss.com/docs/dark-mode

[clarklab]

Are there any "best practices" for adding dark mode classes with WordPress specifically? I've done dark mode in standalone Tailwind builds, but I'm curious if there's a "right" way to do it with WordPress (maybe in theme.json, etc). Does WordPress have any built-in dark mode support?

[jarednthomas]

How I'm doing it so far:
At wp_head, either hooked or in in a script tag:

if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
	document.documentElement.classList.add('dark');
} else {
  	document.documentElement.classList.remove('dark')
}

Then in app.js:

let darkModeToggle = this.document.querySelector('#darkModeToggle');

if (localStorage.theme === 'dark' ) {
  document.documentElement.classList.add('dark');
  darkModeToggle.classList.add('is-style-dark');
}

darkModeToggle.addEventListener('click', function(e) {
    e.preventDefault();

    // Toggle Dark Mode
    if ( localStorage.theme === 'dark' ) {
      localStorage.theme = 'light'
      document.documentElement.classList.remove('dark')
      darkModeToggle.classList.remove('is-style-dark');
    } else {
      localStorage.theme = 'dark'
      document.documentElement.classList.add('dark')
      darkModeToggle.classList.add('is-style-dark');
    }
  }
);

Finally, stick your button somewhere like the footer etc, and then in your tailwind.config.js:

module.exports = {
    darkMode: 'class',
}

[naurissteins]

The file tailwind.config.js doesn't exist. I added darkMode: 'class', in file postcss.config.js but the dark mode still not working. On my custom html template outside tailpress dark mode works fine.

[jeffreyvr]

Tailwind CSS v4 does not use a default tailwind.config.js file anymore.

For toggle functionality you need to add the following to resources/css/app.css:

@custom-variant dark (&:where(.dark, .dark *));

You'll find more about dark mode on the tailwind docs site: https://tailwindcss.com/docs/dark-mode