Configurable Dark Mode ClassName

src/corePlugins.js

@@ -134,7 +134,8 @@ export let variantPlugins = {
   },
 
   darkVariants: ({ config, addVariant }) => {
-    let mode = config('darkMode', 'media')
+    let [mode, className = '.dark'] = [].concat(config('darkMode', 'media'))
+
     if (mode === false) {
       mode = 'media'
       log.warn('darkmode-false', [
@@ -144,7 +145,7 @@ export let variantPlugins = {
     }
 
     if (mode === 'class') {
-      addVariant('dark', '.dark &')
+      addVariant('dark', `${className} &`)
     } else if (mode === 'media') {
       addVariant('dark', '@media (prefers-color-scheme: dark)')
     }

tests/dark-mode.test.js

@@ -22,6 +22,28 @@ it('should be possible to use the darkMode "class" mode', () => {
   })
 })
 
+it('should be possible to change the class name', () => {
+  let config = {
+    darkMode: ['class', '.test-dark'],
+    content: [{ raw: html`<div class="dark:font-bold"></div>` }],
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .test-dark .dark\:font-bold {
+        font-weight: 700;
+      }
+    `)
+  })
+})
+
 it('should be possible to use the darkMode "media" mode', () => {
   let config = {
     darkMode: 'media',