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

Author: muhammadsammy

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.
    *

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)) {

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};