Skip to content

Commit

Permalink
feat: support for set dark to default theme (#78)
Browse files Browse the repository at this point in the history
* feat: support for set dark to default theme

* test: support for set dark to default theme
  • Loading branch information
wzc520pyfm authored Jun 10, 2024
1 parent 1877238 commit 549c991
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 3 deletions.
13 changes: 10 additions & 3 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>()
Expand All @@ -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)
Expand Down Expand Up @@ -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
Expand Down
38 changes: 38 additions & 0 deletions tests/index.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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(
{
Expand Down

0 comments on commit 549c991

Please sign in to comment.