feat: support customizing class name when using darkMode: 'class' (fixes

#398)
muhammadsammy · May 21, 2023 · 853e7d3 · 853e7d3
1 parent d6124b3
commit 853e7d3
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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};