feat: support for set dark to default theme (#78)

* feat: support for set dark to default theme * test: support for set dark to default theme
unpreset · Jun 10, 2024 · 549c991 · 549c991
1 parent 1877238
commit 549c991
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 3 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -41,8 +41,15 @@ interface ThemeValue {
 export function presetTheme<T extends Record<string, any>>(options: PresetThemeOptions<T>): Preset<T> {
   const { prefix = '--un-preset-theme', theme } = options
   const selectors: Selectors = { light: ':root', ...options.selectors }
-  if (!theme.light)
+  let originalThemeKey: 'dark' | 'light' = 'light'
+  if (!theme.dark) {
+    theme.dark = {} as T
+    originalThemeKey = 'dark'
+  }
+  if (!theme.light) {
     theme.light = {} as T
+    originalThemeKey = 'light'
+  }
   const keys = Object.keys(theme)
   const varsRE = new RegExp(`var\\((${prefix}[\\w-]*)\\)`)
   const themeValues = new Map<string, ThemeValue>()
@@ -62,7 +69,7 @@ export function presetTheme<T extends Record<string, any>>(options: PresetThemeO
                 (obj, key) => {
                   let themeValue
                     = getThemeVal(theme[key], themeKeys, index)
-                    || (key === 'light' ? getThemeVal(originalTheme, themeKeys) : null)
+                    || (key === originalThemeKey ? getThemeVal(originalTheme, themeKeys) : null)
                   if (themeValue) {
                     if (isColor) {
                       const cssColor = parseCssColor(themeValue)
@@ -230,7 +237,7 @@ export function presetTheme<T extends Record<string, any>>(options: PresetThemeO
 
           return res
             .sort((a, b) => {
-              const regexStr = `^${selectors.light}|^@media \\(prefers-color-scheme:`
+              const regexStr = `^${selectors[originalThemeKey]}|^@media \\(prefers-color-scheme:`
               if (a.match(regexStr)?.length)
                 return b.match(regexStr)?.length ? 0 : -1
               return 1

diff --git a/tests/index.test.ts b/tests/index.test.ts
@@ -186,6 +186,44 @@ describe('theme', () => {
     `)
   })
 
+  it('selectors for default dark theme', async () => {
+    const uno = createGenerator({
+      theme: {
+        colors: {
+          primary: '#123456',
+        },
+      },
+      presets: [
+        presetUno(),
+        presetTheme<Theme>({
+          theme: {
+            light: {
+              colors: {
+                primary: '#654321',
+              },
+            },
+          },
+          selectors: {
+            dark: ':root,.dark',
+            light: '.light',
+          },
+        }),
+      ],
+    })
+
+    const targets = ['text-primary']
+    const { css } = await uno.generate(targets.join('\n'))
+    expect(css).toMatchInlineSnapshot(`
+      "/* layer: preflights */
+      *,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}
+      /* layer: theme */
+      :root,.dark{--un-preset-theme-colors-primary:18 52 86;}
+      .light{--un-preset-theme-colors-primary:101 67 33;}
+      /* layer: default */
+      .text-primary{--un-text-opacity:1;color:rgb(var(--un-preset-theme-colors-primary) / var(--un-text-opacity));}"
+    `)
+  })
+
   it('color opacity', async () => {
     const uno = createUno(
       {