Search code examples
csstailwind-cssdarkmode

Change class name TailwindCSS uses to toggle dark mode

TailwindCSS supports dark mode as a first-level feature.

To enable it with manual switching based on a class applied higher in the HTML DOM tree, you can update your config like

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  // ...
}

Per the docs

Now instead of dark:{class} classes being applied based on prefers-color-scheme, they will be applied whenever dark class is present earlier in the HTML tree.

Is it possible to change what class name toggles this behavior? For instance, if I wanted the class to be called dark-mode instead of dark?

A reason for doing this would be if the class name that toggles dark mode is present in an application, but the name of that class is not controlled by the designer creating the styling.

Solution

  • The dark class seems to be hardcoded https://github.com/tailwindlabs/tailwindcss/blob/691ed02f6352da17048dd14f742f7c82919e1455/src/corePlugins.js#L290 so overwritting it isn't currently possible.