feat: support custom dark mode selector (#10)

Author: kainstar

src/generate.ts

@@ -15,13 +15,13 @@ function generateColorCSSVars(color: ThemeCSSVars) {
     .join('\n')
 }
 
-function colorCSSVarsStyles(lightVars: string, darkVars: string, { radius, themeName }: { radius?: number | false, themeName?: string | false }) {
+function colorCSSVarsStyles(lightVars: string, darkVars: string, { radius, themeName, darkSelector }: { radius?: number | false, themeName?: string | false, darkSelector: string }) {
   return `
 ${themeName ? `.theme-${themeName}` : ':root'} {
 ${lightVars}
 ${radius ? generateRadiusCSSVars(radius) : ''}
 }
-${themeName ? `.dark .theme-${themeName}` : '.dark'} {
+${themeName ? `${darkSelector} .theme-${themeName}` : darkSelector} {
 ${darkVars}
 }`
 }
@@ -89,7 +89,7 @@ export function generateCSSVars(
   if (Array.isArray(theme))
     return theme.map(t => generateCSSVars(t, false)).join('\n')
 
-  const { color = 'zinc', radius = 0.5 } = theme
+  const { color = 'zinc', radius = 0.5, darkSelector = '.dark' } = theme
 
   let cssStyle = ''
 
@@ -102,7 +102,7 @@ export function generateCSSVars(
     const lightVars = generateColorCSSVars(light)
     const darkVars = generateColorCSSVars(dark)
 
-    cssStyle += colorCSSVarsStyles(lightVars, darkVars, { radius, themeName: !onlyOne && name })
+    cssStyle += colorCSSVarsStyles(lightVars, darkVars, { radius, themeName: !onlyOne && name, darkSelector })
   }
 
   return cssStyle

src/types.ts

@@ -20,6 +20,10 @@ export interface ThemeOptions {
    * @default 0.5
    */
   radius?: number | false,
+  /**
+   * @default '.dark'
+   */
+  darkSelector?: string,
 }
 
 export type PresetShadcnOptions = ArrayOrSingle<ThemeOptions>

test/generate.test.ts

@@ -154,4 +154,12 @@ describe('generate-theme-css-var', () => {
       ]),
     ).toMatchFileSnapshot('snapshot/multiple.css')
   })
+
+  it('custom dark selector', async () => {
+    await expect(
+      generateCSSVars({
+        darkSelector: '.custom-dark',
+      }),
+    ).toMatchFileSnapshot('snapshot/dark-selector.css')
+  })
 })

test/snapshot/dark-selector.css

@@ -0,0 +1,44 @@
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+  --primary: 240 5.9% 10%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 240 5.9% 10%;
+  --radius: 0.5rem;
+}
+.custom-dark {
+  --background: 240 10% 3.9%;
+  --foreground: 0 0% 98%;
+  --card: 240 10% 3.9%;
+  --card-foreground: 0 0% 98%;
+  --popover: 240 10% 3.9%;
+  --popover-foreground: 0 0% 98%;
+  --primary: 0 0% 98%;
+  --primary-foreground: 240 5.9% 10%;
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
+  --accent: 240 3.7% 15.9%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+  --ring: 240 4.9% 83.9%;
+}