From ec962f09ddb33625215a8d1bd305a400d8f7291d Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Fri, 25 Feb 2022 20:03:07 -0500
Subject: [PATCH] Use tuple syntax for customizing darkMode class name

---
 src/corePlugins.js      | 5 +++--
 tests/dark-mode.test.js | 8 ++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index a6aab9b62..b9b9a3403 100644
--- a/src/corePlugins.js
+++ b/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)')
     }
diff --git a/tests/dark-mode.test.js b/tests/dark-mode.test.js
index 3e010c6b0..592a1d8f0 100644
--- a/tests/dark-mode.test.js
+++ b/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;
       }
     `)