feat: ✨ customizing dark mode selector unocss/unocss#1250

MellowCo · Jul 17, 2022 · 66e9069 · 66e9069
1 parent c7a4796
commit 66e9069
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 7 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -10,29 +10,51 @@ export { preflights } from './preflights'
 export { theme, colors } from './theme'
 export { parseColor } from './utils'
 
+// v0.44.0
 export type { ThemeAnimation, Theme }
 
-// v0.44.0
+export interface DarkModeSelectors {
+  /**
+   * Selector for light variant.
+   *
+   * @default '.light'
+   */
+  light?: string
+
+  /**
+   * Selector for dark variant.
+   *
+   * @default '.dark'
+   */
+  dark?: string
+}
 
 export interface PresetMiniOptions extends PresetOptions {
   /**
-   * @default 'class'
+   * Dark mode options
+   *
    */
-  dark?: 'class' | 'media'
+  dark?: 'class' | 'media' | DarkModeSelectors
+
   /**
    * @default false
    */
   attributifyPseudo?: Boolean
+
   /**
+   * Prefix for CSS variables.
+   *
    * @default 'un-'
    */
   variablePrefix?: string
+
   /**
    * Utils prefix
    *
    * @default undefined
    */
   prefix?: string
+
   /**
    * 是否转换微信class
    *
@@ -54,7 +76,7 @@ export const presetWeapp = (options: PresetMiniOptions = {}): Preset<Theme> => {
     options,
     postprocess(css) {
       if (options.transform) {
-      // 转换
+        // 转换
         css.selector = transformSelector(css.selector)
       }
 

diff --git a/src/variants/dark.ts b/src/variants/dark.ts
@@ -3,10 +3,13 @@ import type { PresetMiniOptions } from '..'
 import { variantMatcher, variantParentMatcher } from '../utils'
 
 export const variantColorsMediaOrClass = (options: PresetMiniOptions = {}): Variant[] => {
-  if (options?.dark === 'class') {
+  if (options?.dark === 'class' || typeof options.dark === 'object') {
+    const { dark = '.dark', light = '.light' } = typeof options.dark === 'string'
+      ? {}
+      : options.dark
     return [
-      variantMatcher('dark', input => ({ prefix: `.dark $$ ${input.prefix}` })),
-      variantMatcher('light', input => ({ prefix: `.light $$ ${input.prefix}` })),
+      variantMatcher('dark', input => ({ prefix: `${dark} $$ ${input.prefix}` })),
+      variantMatcher('light', input => ({ prefix: `${light} $$ ${input.prefix}` })),
     ]
   }
 

diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap
@@ -7,6 +7,16 @@ exports[`preset-mini > custom var prefix 1`] = `
 .scale-100{--hi-scale-x:1;--hi-scale-y:1;transform:translateX(var(--hi-translate-x)) translateY(var(--hi-translate-y)) translateZ(var(--hi-translate-z)) rotate(var(--hi-rotate)) rotateX(var(--hi-rotate-x)) rotateY(var(--hi-rotate-y)) rotateZ(var(--hi-rotate-z)) skewX(var(--hi-skew-x)) skewY(var(--hi-skew-y)) scaleX(var(--hi-scale-x)) scaleY(var(--hi-scale-y)) scaleZ(var(--hi-scale-z));}"
 `;
 
+exports[`preset-mini > dark customizing selector 1`] = `
+"/* layer: default */
+[data-mode=\\"dark\\"] .dark-c-bg-white{--un-bg-opacity:1;background-color:rgba(255,255,255,var(--un-bg-opacity));}
+[data-mode=\\"light\\"] .light-c-bg-black{--un-bg-opacity:1;background-color:rgba(0,0,0,var(--un-bg-opacity));}
+[data-mode=\\"dark\\"] .dark-c-hover-c-rounded:hover{border-radius:8rpx;}
+[data-mode=\\"dark\\"] .dark-c-text-lg{font-size:36rpx;line-height:56rpx;}
+[data-mode=\\"light\\"] .light-c-text-sm{font-size:28rpx;line-height:40rpx;}
+[data-mode=\\"light\\"] .light-c-disabled-c-w-full:disabled{width:100%;}"
+`;
+
 exports[`preset-mini > nested theme colors 1`] = `
 "/* layer: default */
 .bg-a-b-c{--licl-bg-opacity:1;background-color:rgba(81,69,67,var(--licl-bg-opacity));}

diff --git a/test/preset-mini.test.ts b/test/preset-mini.test.ts
@@ -29,6 +29,32 @@ const uno = createGenerator({
 })
 
 describe('preset-mini', () => {
+  test('dark customizing selector', async () => {
+    const uno = createGenerator({
+      presets: [
+        presetMini({
+          dark: {
+            dark: '[data-mode="dark"]',
+            light: '[data-mode="light"]',
+          },
+        }),
+      ],
+    })
+
+    const { css } = await uno.generate([
+      'dark:bg-white',
+      'dark:text-lg',
+      'dark:hover:rounded',
+      'light:bg-black',
+      'light:text-sm',
+      'light:disabled:w-full',
+    ].join(' '), {
+      preflights: false,
+    })
+
+    expect(css).toMatchSnapshot()
+  })
+
   test('targets', async () => {
     const code = presetMiniTargets.join(' ')
     const { css } = await uno.generate(code)