From 853e7d327d3e47364ff2479341a23389f43bf778 Mon Sep 17 00:00:00 2001
From: Muhammad Sammy <muhammad_sammy@outlook.com>
Date: Sun, 21 May 2023 19:05:06 +0300
Subject: [PATCH] feat: support customizing class name when using darkMode:
 'class' (fixes #398)

---
 src/cli/core/FileContentGenerator.ts | 16 ++++++++++++++++
 src/cli/core/TailwindConfigParser.ts |  3 ++-
 src/cli/types/config.ts              |  2 +-
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/cli/core/FileContentGenerator.ts b/src/cli/core/FileContentGenerator.ts
index efbfb3fc..39d58990 100644
--- a/src/cli/core/FileContentGenerator.ts
+++ b/src/cli/core/FileContentGenerator.ts
@@ -155,6 +155,7 @@ export class FileContentGenerator {
       'export type TArg =\n' +
       '| null\n' +
       '| undefined\n' +
+      this.getDarkModeClassnameType() +
       '| TTailwindString\nIMPORTED_T_CUSTOM_CLASSES_ARG' +
       '\n' +
       'export type TTailwind = (...args: TArg[]) => TTailwindString\n' +
@@ -165,6 +166,21 @@ export class FileContentGenerator {
     );
   };
 
+  /**
+   * Get the dark mode config custom classname type
+   * @returns the name of the classname for dark mode
+   */
+  private getDarkModeClassnameType = (): string => {
+    const darkModeConfig = this._configParser.getDarkMode();
+    if (_.isArray(darkModeConfig) && darkModeConfig[0] === 'class') {
+      return `| '${darkModeConfig[1]}'\n`;
+    } else if (_.isString(darkModeConfig) && darkModeConfig === 'class') {
+      return `| 'dark'\n`;
+    } else {
+      return '';
+    }
+  };
+
   /**
    * Generates types group template for a utility classes group object.
    *
diff --git a/src/cli/core/TailwindConfigParser.ts b/src/cli/core/TailwindConfigParser.ts
index 71bf1555..64514cd8 100644
--- a/src/cli/core/TailwindConfigParser.ts
+++ b/src/cli/core/TailwindConfigParser.ts
@@ -121,7 +121,8 @@ export class TailwindConfigParser {
 
     // get responsive variants
     const [mediaBreakpoints] = this.getThemeProperty('screens');
-    if (this.getDarkMode() == 'media' || this.getDarkMode() == 'class') mediaBreakpoints.push('dark');
+    if (this.getDarkMode() == 'media' || this.getDarkMode() == 'class')
+      mediaBreakpoints.push('dark');
 
     mediaBreakpoints.map((breakpoint: string) => {
       if (!variants.includes(breakpoint)) {
diff --git a/src/cli/types/config.ts b/src/cli/types/config.ts
index 03b8f698..9445fb22 100644
--- a/src/cli/types/config.ts
+++ b/src/cli/types/config.ts
@@ -5,7 +5,7 @@ export type TTailwindCSSConfig = Partial<
   typeof defaultTailwindConfig & Record<'separator' | 'prefix' | 'mode', string>
 >;
 
-export type TConfigDarkMode = false | 'media' | 'class';
+export type TConfigDarkMode = false | 'media' | 'class' | ['media' | 'class', string];
 
 export type TConfigTheme = TThemeItems & {extend?: TThemeItems};