Skip to content

Commit 39381e8

Browse files
universseuniversse
committed
feat: simplify theme config
1 parent db23d0d commit 39381e8

27 files changed

+800
-798
lines changed

‎README.md

+25-48
Original file line numberDiff line numberDiff line change
@@ -46,22 +46,14 @@ It's recommended to initialize Palettez in a synchronous script to avoid theme f
4646
;(async () => {
4747
const themeStore = window.palettez.createThemeStore({
4848
config: {
49-
colorScheme: {
50-
label: 'Color scheme',
51-
options: {
52-
system: {
53-
value: 'System',
54-
isDefault: true,
55-
media: {
56-
query: '(prefers-color-scheme: dark)',
57-
ifMatch: 'dark',
58-
ifNotMatch: 'light',
59-
},
60-
},
61-
light: { value: 'Light' },
62-
dark: { value: 'Dark' },
49+
colorScheme: [
50+
{
51+
value: 'system',
52+
media: ['(prefers-color-scheme: dark)', 'dark', 'light'],
6353
},
64-
},
54+
'light',
55+
'dark',
56+
],
6557
},
6658
})
6759
@@ -101,41 +93,26 @@ const themeStore = createThemeStore({
10193

10294
// required, specify theme and options
10395
config: {
104-
colorScheme: {
105-
label: 'Color scheme',
106-
options: {
107-
system: {
108-
value: 'System',
109-
isDefault: true,
110-
111-
// only supported client-side
112-
media: {
113-
query: '(prefers-color-scheme: dark)',
114-
ifMatch: 'dark',
115-
ifNotMatch: 'light',
116-
},
117-
},
118-
light: { value: 'Light' },
119-
dark: { value: 'Dark' },
96+
colorScheme: [
97+
{
98+
value: 'system',
99+
media: ['(prefers-color-scheme: dark)', 'dark', 'light'],
120100
},
121-
},
122-
123-
contrast: {
124-
label: 'Contrast',
125-
options: {
126-
system: {
127-
value: 'System',
128-
isDefault: true,
129-
media: {
130-
query: '(prefers-contrast: more) and (forced-colors: none)',
131-
ifMatch: 'more',
132-
ifNotMatch: 'standard',
133-
},
134-
},
135-
standard: { value: 'Standard' },
136-
high: { value: 'High' },
101+
'light',
102+
'dark',
103+
],
104+
contrast: [
105+
{
106+
value: 'system',
107+
media: [
108+
'(prefers-contrast: more) and (forced-colors: none)',
109+
'high',
110+
'standard',
111+
],
137112
},
138-
},
113+
'standard',
114+
'high',
115+
],
139116
},
140117

141118
// optional, specify your own storage solution. localStorage is used by default.

‎demos/astro/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@
77
"dev": "astro dev --port 3000"
88
},
99
"dependencies": {
10-
"astro": "4.14.2",
10+
"astro": "4.15.1",
1111
"palettez": "workspace:*",
1212
"react": "18.3.1",
1313
"react-dom": "18.3.1"
1414
},
1515
"devDependencies": {
1616
"@astrojs/react": "3.6.2",
17-
"@astrojs/vercel": "7.7.2",
18-
"@types/react": "18.3.3",
17+
"@astrojs/vercel": "7.8.0",
18+
"@types/react": "18.3.4",
1919
"@types/react-dom": "18.3.0",
2020
"typescript": "5.5.4"
2121
}

‎demos/astro/src/pages/_sync-theme-select.tsx

+11-15
Original file line numberDiff line numberDiff line change
@@ -5,31 +5,27 @@ export function ThemeSelect({
55
themesAndOptions,
66
}: {
77
storeKey: string
8-
themesAndOptions: Array<{
9-
key: string
10-
label: string
11-
options: Array<{ key: string; value: string }>
12-
}>
8+
themesAndOptions: Array<[string, Array<string>]>
139
}) {
1410
const { themes, setThemes } = usePalettez(() =>
1511
window.palettez.getThemeStore(storeKey),
1612
)
1713

18-
return themesAndOptions.map((theme) => (
19-
<div key={theme.key}>
14+
return themesAndOptions.map(([theme, options]) => (
15+
<div key={theme}>
2016
<input type='hidden' name='key' value={storeKey} />
21-
<label htmlFor={theme.key}>{theme.label}</label>{' '}
17+
<label htmlFor={theme}>{theme}</label>{' '}
2218
<select
23-
id={theme.key}
24-
name={theme.key}
19+
id={theme}
20+
name={theme}
2521
onChange={(e) => {
26-
setThemes({ [theme.key]: e.target.value })
22+
setThemes({ [theme]: e.target.value })
2723
}}
28-
value={themes[theme.key]}
24+
value={themes[theme]}
2925
>
30-
{theme.options.map((option) => (
31-
<option key={option.key} value={option.key}>
32-
{option.value}
26+
{options.map((option) => (
27+
<option key={option} value={option}>
28+
{option}
3329
</option>
3430
))}
3531
</select>

‎demos/astro/src/pages/_theme-select.tsx

+11-15
Original file line numberDiff line numberDiff line change
@@ -6,33 +6,29 @@ export function ThemeSelect({
66
themesAndOptions,
77
}: {
88
storeKey: string
9-
themesAndOptions: Array<{
10-
key: string
11-
label: string
12-
options: Array<{ key: string; value: string }>
13-
}>
9+
themesAndOptions: Array<[string, Array<string>]>
1410
}) {
1511
const stores = useThemeStoreContext()
1612

1713
const { themes, setThemes } = usePalettez(() => stores[storeKey], {
1814
initOnMount: true,
1915
})
2016

21-
return themesAndOptions.map((theme) => (
22-
<div key={theme.key}>
17+
return themesAndOptions.map(([theme, options]) => (
18+
<div key={theme}>
2319
<input type='hidden' name='key' value={storeKey} />
24-
<label htmlFor={theme.key}>{theme.label}</label>{' '}
20+
<label htmlFor={theme}>{theme}</label>{' '}
2521
<select
26-
id={theme.key}
27-
name={theme.key}
22+
id={theme}
23+
name={theme}
2824
onChange={(e) => {
29-
setThemes({ [theme.key]: e.target.value })
25+
setThemes({ [theme]: e.target.value })
3026
}}
31-
value={themes[theme.key]}
27+
value={themes[theme]}
3228
>
33-
{theme.options.map((option) => (
34-
<option key={option.key} value={option.key}>
35-
{option.value}
29+
{options.map((option) => (
30+
<option key={option} value={option}>
31+
{option}
3632
</option>
3733
))}
3834
</select>

‎demos/astro/src/pages/index.astro

+10-24
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,21 @@
11
---
2-
import { getThemesAndOptions } from 'palettez'
2+
import { type ThemeConfig, getThemesAndOptions } from 'palettez'
33
import palettez from 'palettez/raw?raw'
44
import { singleStoreScript } from './_single-store-script'
55
import { ThemeSelect } from './_sync-theme-select'
66
import './_style.css'
77
88
const config = {
9-
colorScheme: {
10-
label: 'Color scheme',
11-
options: {
12-
system: {
13-
value: 'System',
14-
isDefault: true,
15-
media: {
16-
query: '(prefers-color-scheme: dark)',
17-
ifMatch: 'dark',
18-
ifNotMatch: 'light',
19-
},
20-
},
21-
light: { value: 'Light' },
22-
dark: { value: 'Dark' },
9+
colorScheme: [
10+
{
11+
value: 'system',
12+
media: ['(prefers-color-scheme: dark)', 'dark', 'light'],
2313
},
24-
},
25-
contrast: {
26-
label: 'Contrast',
27-
options: {
28-
standard: { value: 'Standard', isDefault: true },
29-
high: { value: 'High' },
30-
},
31-
},
32-
}
14+
'light',
15+
'dark',
16+
],
17+
contrast: ['standard', 'high'],
18+
} as const satisfies ThemeConfig
3319
3420
const themesAndOptions = getThemesAndOptions(config)
3521

‎demos/astro/src/pages/multi-store-with-server-persistence.astro

+10-24
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
import { getThemesAndOptions } from 'palettez'
2+
import { type ThemeConfig, getThemesAndOptions } from 'palettez'
33
import palettez from 'palettez/raw?raw'
44
import { createStoresScript } from './_multi-store-scripts'
55
import { ThemeSelect } from './_sync-theme-select'
@@ -9,30 +9,16 @@ import './_style.css'
99
export const prerender = false
1010
1111
const config = {
12-
colorScheme: {
13-
label: 'Color scheme',
14-
options: {
15-
system: {
16-
value: 'System',
17-
isDefault: true,
18-
media: {
19-
query: '(prefers-color-scheme: dark)',
20-
ifMatch: 'dark',
21-
ifNotMatch: 'light',
22-
},
23-
},
24-
light: { value: 'Light' },
25-
dark: { value: 'Dark' },
12+
colorScheme: [
13+
{
14+
value: 'system',
15+
media: ['(prefers-color-scheme: dark)', 'dark', 'light'],
2616
},
27-
},
28-
contrast: {
29-
label: 'Contrast',
30-
options: {
31-
standard: { value: 'Standard', isDefault: true },
32-
high: { value: 'High' },
33-
},
34-
},
35-
}
17+
'light',
18+
'dark',
19+
],
20+
contrast: ['standard', 'high'],
21+
} as const satisfies ThemeConfig
3622
3723
const themeStoreKeys = ['app', 'section1', 'section2']
3824

‎demos/astro/src/pages/no-hydration-mismatch.astro

+11-25
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,21 @@
11
---
2-
import { getThemesAndOptions } from 'palettez'
2+
import { type ThemeConfig, getThemesAndOptions } from 'palettez'
33
import { Page } from './_no-hydration-mismatch'
44
import './_style.css'
55
66
export const prerender = false
77
88
const config = {
9-
colorScheme: {
10-
label: 'Color scheme',
11-
options: {
12-
// system: {
13-
// value: 'System',
14-
// isDefault: true,
15-
// media: {
16-
// query: '(prefers-color-scheme: dark)',
17-
// ifMatch: 'dark',
18-
// ifNotMatch: 'light',
19-
// },
20-
// },
21-
light: { value: 'Light' },
22-
dark: { value: 'Dark' },
23-
},
24-
},
25-
contrast: {
26-
label: 'Contrast',
27-
options: {
28-
standard: { value: 'Standard', isDefault: true },
29-
high: { value: 'High' },
30-
},
31-
},
32-
}
9+
colorScheme: [
10+
// {
11+
// value: 'system',
12+
// media: ['(prefers-color-scheme: dark)', 'dark', 'light'],
13+
// },
14+
'light',
15+
'dark',
16+
],
17+
contrast: ['standard', 'high'],
18+
} as const satisfies ThemeConfig
3319
3420
const configsByKey = {
3521
app: config,

‎demos/next/app/multi-store-with-server-persistence/page.tsx

+10-24
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,20 @@
11
import { cookies } from 'next/headers'
2-
import { getThemesAndOptions } from 'palettez'
2+
import { type ThemeConfig, getThemesAndOptions } from 'palettez'
33
import { createStoresScript } from '../../lib/multi-store-scripts'
44
import { ThemeSelect } from '../../lib/sync-theme-select'
55
import { ThemeWrapper } from '../../lib/sync-theme-wrapper'
66

77
const config = {
8-
colorScheme: {
9-
label: 'Color scheme',
10-
options: {
11-
system: {
12-
value: 'System',
13-
isDefault: true,
14-
media: {
15-
query: '(prefers-color-scheme: dark)',
16-
ifMatch: 'dark',
17-
ifNotMatch: 'light',
18-
},
19-
},
20-
light: { value: 'Light' },
21-
dark: { value: 'Dark' },
22-
},
23-
},
24-
contrast: {
25-
label: 'Contrast',
26-
options: {
27-
standard: { value: 'Standard', isDefault: true },
28-
high: { value: 'High' },
8+
colorScheme: [
9+
{
10+
value: 'system',
11+
media: ['(prefers-color-scheme: dark)', 'dark', 'light'],
2912
},
30-
},
31-
}
13+
'light',
14+
'dark',
15+
],
16+
contrast: ['standard', 'high'],
17+
} as const satisfies ThemeConfig
3218

3319
const themeStoreKeys = ['app', 'section1', 'section2']
3420

0 commit comments

Comments
 (0)