Use tuple syntax for customizing darkMode class name

Author: adamwathan

src/corePlugins.js

@@ -171,7 +171,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', [
@@ -182,7 +183,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

@@ -23,10 +23,9 @@ it('should be possible to use the darkMode "class" mode', () => {
   })
 })
 
-it('should be possible to change default class with darkMode "class" mode', () => {
+it('should be possible to change the class name', () => {
   let config = {
-    darkMode: 'class',
-    darkModeClassName: '.test-dark',
+    darkMode: ['class', '.test-dark'],
     content: [{ raw: html`<div class="dark:font-bold"></div>` }],
     corePlugins: { preflight: false },
   }
@@ -39,7 +38,8 @@ it('should be possible to change default class with darkMode "class" mode', () =
 
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
-      .test-dark .dark\\:font-bold {
+      ${defaults}
+      .test-dark .dark\:font-bold {
         font-weight: 700;
       }
     `)