diff --git a/src/index.ts b/src/index.ts index 12b6047..9681acb 100644 --- a/src/index.ts +++ b/src/index.ts @@ -41,8 +41,15 @@ interface ThemeValue { export function presetTheme>(options: PresetThemeOptions): Preset { 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() @@ -62,7 +69,7 @@ export function presetTheme>(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>(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 index 4f552a3..0418adf 100644 --- 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: { + 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( {