feat(docs): add dark mode configuration support

SutuSebastian · SutuSebastian · commit 3e146fe9f146 · 2025-03-13T11:05:49.000+02:00
- Introduced `dark` option in `.flowbite-react/config.json` to enable dark mode styles.
- Implemented functionality to strip dark mode classes from generated styles.
diff --git a/apps/storybook/.flowbite-react/config.json b/apps/storybook/.flowbite-react/config.json
@@ -1,6 +1,7 @@
 {
   "$schema": "../../../node_modules/flowbite-react/schema.json",
   "components": [],
+  "dark": true,
   "path": "src/components",
   "prefix": "",
   "rsc": true,
diff --git a/apps/web/.flowbite-react/config.json b/apps/web/.flowbite-react/config.json
@@ -1,6 +1,7 @@
 {
   "$schema": "../../../node_modules/flowbite-react/schema.json",
   "components": [],
+  "dark": true,
   "path": "components",
   "prefix": "",
   "rsc": true,
diff --git a/apps/web/content/docs/customize/config.mdx b/apps/web/content/docs/customize/config.mdx
@@ -64,6 +64,12 @@ The configuration file follows this JSON Schema:
   - Use `"*"` to explicitly include all components (equivalent to listing every component)
   - When not using `"*"`, use valid component names (e.g., `Button`, `Card`, `Modal`). See the [schema](https://unpkg.com/flowbite-react/schema.json) for the full list of valid components.
 
+#### `dark`
+
+- Type: `boolean`
+- Default: `true`
+- Description: Whether to generate dark mode styles.
+
 #### `path`
 
 - Type: `string`
diff --git a/apps/web/content/docs/getting-started/cli.mdx b/apps/web/content/docs/getting-started/cli.mdx
@@ -229,6 +229,7 @@ The CLI creates a `.flowbite-react/config.json` file with several configuration
 {
   "$schema": "https://unpkg.com/flowbite-react/schema.json",
   "components": [],
+  "dark": true,
   "path": "src/components",
   "prefix": "",
   "rsc": true,
@@ -240,6 +241,10 @@ The CLI creates a `.flowbite-react/config.json` file with several configuration
 
 List of component names to generate styles for. An empty array enables automatic detection.
 
+#### `dark`
+
+Whether to generate dark mode styles. Default is `true`.
+
 #### `path`
 
 Path where components will be created, relative to the project root. Default is `"src/components"`.
diff --git a/packages/ui/schema.json b/packages/ui/schema.json
@@ -116,6 +116,11 @@
       },
       "uniqueItems": true
     },
+    "dark": {
+      "description": "Whether to generate dark mode styles. \nSee https://flowbite-react.com/docs/customize/config#dark for more details.",
+      "type": "boolean",
+      "default": true
+    },
     "path": {
       "description": "Path where components will be created, relative to the project root. \nSee https://flowbite-react.com/docs/customize/config#path for more details.",
       "type": "string",
diff --git a/packages/ui/scripts/generate-metadata.ts b/packages/ui/scripts/generate-metadata.ts
@@ -219,6 +219,12 @@ async function generateSchema(components: string[]): Promise<void> {
           },
           uniqueItems: true,
         },
+        dark: {
+          description:
+            "Whether to generate dark mode styles. \nSee https://flowbite-react.com/docs/customize/config#dark for more details.",
+          type: "boolean",
+          default: true,
+        },
         path: {
           description:
             "Path where components will be created, relative to the project root. \nSee https://flowbite-react.com/docs/customize/config#path for more details.",
diff --git a/packages/ui/src/cli/index.ts b/packages/ui/src/cli/index.ts
@@ -270,8 +270,9 @@ export async function dev() {
 
     const config = await getConfig();
     const newClassList = buildClassList({
-      prefix: config.prefix,
       components: config.components.length ? config.components : newImportedComponents,
+      dark: config.dark,
+      prefix: config.prefix,
     });
 
     if (!isEqual(classList, newClassList)) {
@@ -504,6 +505,7 @@ export async function setupConfig() {
     const defaultConfig: Config = {
       $schema: "https://unpkg.com/flowbite-react/schema.json",
       components: [],
+      dark: true,
       prefix: "",
       path: "src/components",
       tsx: true,
diff --git a/packages/ui/src/cli/utils/build-class-list.ts b/packages/ui/src/cli/utils/build-class-list.ts
@@ -2,6 +2,7 @@ import { applyPrefix } from "../../helpers/apply-prefix";
 import { applyPrefixV3 } from "../../helpers/apply-prefix-v3";
 import { convertUtilitiesToV4 } from "../../helpers/convert-utilities-to-v4";
 import { getTailwindVersion } from "../../helpers/get-tailwind-version";
+import { stripDark } from "../../helpers/strip-dark";
 import { CLASS_LIST_MAP, COMPONENT_TO_CLASS_LIST_MAP } from "../../metadata/class-list";
 import { DEPENDENCY_LIST_MAP } from "../../metadata/dependency-list";
 
@@ -10,10 +11,19 @@ import { DEPENDENCY_LIST_MAP } from "../../metadata/dependency-list";
  *
  * @param {Object} options - The options for building the class list.
  * @param {string[]} options.components - The components to include in the class list.
+ * @param {boolean} options.dark - Whether to include dark mode classes.
  * @param {string} options.prefix - The prefix to apply to the class names.
  * @returns {string[]} The sorted list of CSS classes.
  */
-export function buildClassList({ components, prefix }: { components: string[]; prefix: string }): string[] {
+export function buildClassList({
+  components,
+  dark,
+  prefix,
+}: {
+  components: string[];
+  dark: boolean;
+  prefix: string;
+}): string[] {
   const version = getTailwindVersion();
 
   let classList: string[] = [];
@@ -59,6 +69,9 @@ export function buildClassList({ components, prefix }: { components: string[]; p
     ];
   }
 
+  if (dark === false) {
+    classList = classList.map(stripDark);
+  }
   if (version === 4) {
     classList = classList.map(convertUtilitiesToV4);
   }
diff --git a/packages/ui/src/cli/utils/get-config.ts b/packages/ui/src/cli/utils/get-config.ts
@@ -4,6 +4,7 @@ import { configFilePath } from "../consts";
 export interface Config {
   $schema: string;
   components: string[];
+  dark: boolean;
   path: string;
   prefix: string;
   rsc: boolean;
@@ -22,6 +23,7 @@ export async function getConfig(): Promise<Config> {
   const config: Config = {
     $schema: "",
     components: [],
+    dark: true,
     path: "src/components",
     prefix: "",
     rsc: true,
@@ -38,6 +40,9 @@ export async function getConfig(): Promise<Config> {
     if (parsed.components !== undefined && Array.isArray(parsed.components)) {
       config.components = parsed.components.map((component) => component.trim()).filter(Boolean);
     }
+    if (parsed.dark !== undefined && typeof parsed.dark === "boolean") {
+      config.dark = parsed.dark;
+    }
     if (parsed.path !== undefined && typeof parsed.path === "string") {
       config.path = parsed.path;
     }
diff --git a/packages/ui/src/helpers/get-tailwind-version.ts b/packages/ui/src/helpers/get-tailwind-version.ts
@@ -2,6 +2,7 @@ import colors from "tailwindcss/colors.js";
 
 /**
  * Gets the major version number of the installed Tailwind CSS
+ *
  * @returns The major version number (3 or 4) or undefined if not found
  */
 export function getTailwindVersion(): 3 | 4 | undefined {
diff --git a/packages/ui/src/helpers/is-equal.ts b/packages/ui/src/helpers/is-equal.ts
@@ -1,3 +1,24 @@
+/**
+ * Performs a deep equality comparison between two values.
+ *
+ * This function recursively compares objects and arrays, handling special cases like:
+ * - RegExp objects (comparing source and flags)
+ * - Objects with custom valueOf or toString methods
+ * - Arrays (comparing length and each element)
+ * - NaN values (which are considered equal to each other)
+ *
+ * @param {any} a - The first value to compare
+ * @param {any} b - The second value to compare
+ * @returns {boolean} True if the values are deeply equal, false otherwise
+ *
+ * @example
+ * ```ts
+ * isEqual({a: 1, b: 2}, {a: 1, b: 2}); // true
+ * isEqual([1, 2, 3], [1, 2, 3]); // true
+ * isEqual(/abc/g, /abc/g); // true
+ * isEqual(NaN, NaN); // true
+ * ```
+ */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function isEqual(a: any, b: any): boolean {
   if (a === b) {
diff --git a/packages/ui/src/helpers/resolve-theme.ts b/packages/ui/src/helpers/resolve-theme.ts
@@ -1,14 +1,15 @@
 import { deepmerge } from "deepmerge-ts";
 import { klona } from "klona/json";
 import { useRef } from "react";
-import { getPrefix } from "../store";
+import { getDark, getPrefix } from "../store";
 import type { ApplyTheme, DeepPartialApplyTheme, DeepPartialBoolean } from "../types";
 import { applyPrefix } from "./apply-prefix";
 import { applyPrefixV3 } from "./apply-prefix-v3";
 import { convertUtilitiesToV4 } from "./convert-utilities-to-v4";
 import { deepMergeStrings } from "./deep-merge";
 import { getTailwindVersion } from "./get-tailwind-version";
 import { isEqual } from "./is-equal";
+import { stripDark } from "./strip-dark";
 import { twMerge } from "./tailwind-merge";
 
 /**
@@ -64,14 +65,15 @@ export function resolveTheme<T>(
   clearThemeList?: DeepPartialBoolean<T>[],
   applyThemeList?: DeepPartialApplyTheme<T>[],
 ): T {
+  const dark = getDark();
   const prefix = getPrefix();
   const version = getTailwindVersion();
 
   const _custom = custom?.length ? custom?.filter((value) => value !== undefined) : undefined;
   const _clearThemeList = clearThemeList?.length ? clearThemeList?.filter((value) => value !== undefined) : undefined;
   const _applyThemeList = applyThemeList?.length ? applyThemeList?.filter((value) => value !== undefined) : undefined;
 
-  const baseTheme = _clearThemeList?.length || version === 4 || prefix ? klona(base) : base;
+  const baseTheme = _clearThemeList?.length || dark === false || version === 4 || prefix ? klona(base) : base;
 
   if (_clearThemeList?.length) {
     const finalClearTheme = cloneWithValue<T, boolean>(baseTheme, false);
@@ -91,8 +93,11 @@ export function resolveTheme<T>(
     }
   }
 
-  if (version === 4 || prefix) {
+  if (dark === false || version === 4 || prefix) {
     stringIterator(baseTheme, (value) => {
+      if (dark === false) {
+        value = stripDark(value);
+      }
       if (version === 4) {
         value = convertUtilitiesToV4(value);
       }
diff --git a/packages/ui/src/helpers/strip-dark.test.ts b/packages/ui/src/helpers/strip-dark.test.ts
@@ -0,0 +1,38 @@
+import { describe, expect, it } from "vitest";
+import { stripDark } from "./strip-dark";
+
+describe("stripDarkClasses", () => {
+  it("should return empty string when input is empty", () => {
+    expect(stripDark("")).toBe("");
+  });
+
+  it("should return the same string when no dark classes are present", () => {
+    const classes = "bg-white text-black p-4 rounded-md";
+    expect(stripDark(classes)).toBe(classes);
+  });
+
+  it("should strip dark mode classes (v3 and v4 format)", () => {
+    const input = "bg-white dark:bg-gray-800 text-black dark:text-white p-4 rounded-md";
+    const expected = "bg-white text-black p-4 rounded-md";
+    expect(stripDark(input)).toBe(expected);
+  });
+
+  it("should handle multiple spaces between classes", () => {
+    const input = "bg-white  dark:bg-gray-800   text-black    dark:text-white";
+    const expected = "bg-white text-black";
+    expect(stripDark(input)).toBe(expected);
+  });
+
+  it("should handle leading and trailing spaces", () => {
+    const input = "  bg-white dark:bg-gray-800 text-black  ";
+    const expected = "bg-white text-black";
+    expect(stripDark(input)).toBe(expected);
+  });
+
+  it("should handle undefined or null input", () => {
+    // @ts-expect-error Testing with undefined
+    expect(stripDark(undefined)).toBe(undefined);
+    // @ts-expect-error Testing with null
+    expect(stripDark(null)).toBe(null);
+  });
+});
diff --git a/packages/ui/src/helpers/strip-dark.ts b/packages/ui/src/helpers/strip-dark.ts
@@ -0,0 +1,44 @@
+const cache = new Map<string, string>();
+
+/**
+ * Removes all dark mode classes from a string of class names.
+ *
+ * This function filters out any class that starts with "dark:" prefix
+ * from the provided string of space-separated class names.
+ * Results are cached for performance.
+ *
+ * @param {string} classNames - A string containing one or more CSS class names separated by spaces
+ * @returns {string} A new string with all dark mode classes removed
+ *
+ * @example
+ * ```ts
+ * stripDark("text-black dark:text-white bg-white dark:bg-black"); // "text-black bg-white"
+ * ```
+ */
+export function stripDark(classNames: string): string {
+  if (classNames === undefined || classNames === null) {
+    return classNames;
+  }
+
+  if (!classNames.trim().length) {
+    return classNames;
+  }
+
+  classNames = classNames.trim();
+
+  const cacheKey = classNames;
+  const cacheValue = cache.get(cacheKey);
+
+  if (cacheValue) {
+    return cacheValue;
+  }
+
+  const result = classNames
+    .split(/\s+/)
+    .filter((className) => !className.startsWith("dark:"))
+    .join(" ");
+
+  cache.set(cacheKey, result);
+
+  return result;
+}
diff --git a/packages/ui/src/store/index.ts b/packages/ui/src/store/index.ts
@@ -2,19 +2,38 @@ import type { ThemeMode } from "../hooks/use-theme-mode";
 import type { DeepPartial } from "../types";
 
 export type StoreProps = DeepPartial<{
+  /**
+   * Whether to generate dark mode styles
+   *
+   * @default true
+   */
+  dark: boolean;
+  /**
+   * Theme mode
+   *
+   * Can be `"light"`, `"dark"`, or `"auto"`
+   *
+   * @default "auto"
+   */
   mode: ThemeMode;
   /**
    * Prefix to apply to base class list
+   *
+   * @default undefined
    */
   prefix: string;
 }>;
 
 const store: StoreProps = {
+  dark: undefined,
   mode: undefined,
   prefix: undefined,
 };
 
 export function setStore(data: StoreProps) {
+  if ("dark" in data) {
+    store.dark = data.dark;
+  }
   if ("mode" in data) {
     store.mode = data.mode;
   }
@@ -23,6 +42,10 @@ export function setStore(data: StoreProps) {
   }
 }
 
+export function getDark(): StoreProps["dark"] {
+  return store.dark;
+}
+
 export function getMode(): StoreProps["mode"] {
   return store.mode;
 }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"$schema": "../../../node_modules/flowbite-react/schema.json",`
`3`	`3`	`"components": [],`
	`4`	`+ "dark": true,`
`4`	`5`	`"path": "src/components",`
`5`	`6`	`"prefix": "",`
`6`	`7`	`"rsc": true,`