feat: simplify theme config

README.md

@@ -46,22 +46,14 @@ It's recommended to initialize Palettez in a synchronous script to avoid theme f
   ;(async () => {
     const themeStore = window.palettez.createThemeStore({
       config: {
-        colorScheme: {
-          label: 'Color scheme',
-          options: {
-            system: {
-              value: 'System',
-              isDefault: true,
-              media: {
-                query: '(prefers-color-scheme: dark)',
-                ifMatch: 'dark',
-                ifNotMatch: 'light',
-              },
-            },
-            light: { value: 'Light' },
-            dark: { value: 'Dark' },
+        colorScheme: [
+          {
+            value: 'system',
+            media: ['(prefers-color-scheme: dark)', 'dark', 'light'],
           },
-        },
+          'light',
+          'dark',
+        ],
       },
     })
 
@@ -101,41 +93,26 @@ const themeStore = createThemeStore({
 
   // required, specify theme and options
   config: {
-    colorScheme: {
-      label: 'Color scheme',
-      options: {
-        system: {
-          value: 'System',
-          isDefault: true,
-
-          // only supported client-side
-          media: {
-            query: '(prefers-color-scheme: dark)',
-            ifMatch: 'dark',
-            ifNotMatch: 'light',
-          },
-        },
-       light: { value: 'Light' },
-       dark: { value: 'Dark' },
+    colorScheme: [
+      {
+        value: 'system',
+        media: ['(prefers-color-scheme: dark)', 'dark', 'light'],
       },
-    },
-
-    contrast: {
-      label: 'Contrast',
-      options: {
-        system: {
-          value: 'System',
-          isDefault: true,
-          media: {
-            query: '(prefers-contrast: more) and (forced-colors: none)',
-            ifMatch: 'more',
-            ifNotMatch: 'standard',
-          },
-        },
-        standard: { value: 'Standard' },
-        high: { value: 'High' },
+      'light',
+      'dark',
+    ],
+    contrast: [
+      {
+        value: 'system',
+        media: [
+          '(prefers-contrast: more) and (forced-colors: none)',
+          'high',
+          'standard',
+        ],
       },
-    },
+      'standard',
+      'high',
+    ],
   },
 
   // optional, specify your own storage solution. localStorage is used by default.

demos/astro/package.json

@@ -7,15 +7,15 @@
 		"dev": "astro dev --port 3000"
 	},
 	"dependencies": {
-		"astro": "4.14.2",
+		"astro": "4.15.1",
 		"palettez": "workspace:*",
 		"react": "18.3.1",
 		"react-dom": "18.3.1"
 	},
 	"devDependencies": {
 		"@astrojs/react": "3.6.2",
-		"@astrojs/vercel": "7.7.2",
-		"@types/react": "18.3.3",
+		"@astrojs/vercel": "7.8.0",
+		"@types/react": "18.3.4",
 		"@types/react-dom": "18.3.0",
 		"typescript": "5.5.4"
 	}

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

@@ -5,31 +5,27 @@ export function ThemeSelect({
 	themesAndOptions,
 }: {
 	storeKey: string
-	themesAndOptions: Array<{
-		key: string
-		label: string
-		options: Array<{ key: string; value: string }>
-	}>
+	themesAndOptions: Array<[string, Array<string>]>
 }) {
 	const { themes, setThemes } = usePalettez(() =>
 		window.palettez.getThemeStore(storeKey),
 	)
 
-	return themesAndOptions.map((theme) => (
-		<div key={theme.key}>
+	return themesAndOptions.map(([theme, options]) => (
+		<div key={theme}>
 			<input type='hidden' name='key' value={storeKey} />
-			<label htmlFor={theme.key}>{theme.label}</label>{' '}
+			<label htmlFor={theme}>{theme}</label>{' '}
 			<select
-				id={theme.key}
-				name={theme.key}
+				id={theme}
+				name={theme}
 				onChange={(e) => {
-					setThemes({ [theme.key]: e.target.value })
+					setThemes({ [theme]: e.target.value })
 				}}
-				value={themes[theme.key]}
+				value={themes[theme]}
 			>
-				{theme.options.map((option) => (
-					<option key={option.key} value={option.key}>
-						{option.value}
+				{options.map((option) => (
+					<option key={option} value={option}>
+						{option}
 					</option>
 				))}
 			</select>

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

@@ -6,33 +6,29 @@ export function ThemeSelect({
 	themesAndOptions,
 }: {
 	storeKey: string
-	themesAndOptions: Array<{
-		key: string
-		label: string
-		options: Array<{ key: string; value: string }>
-	}>
+	themesAndOptions: Array<[string, Array<string>]>
 }) {
 	const stores = useThemeStoreContext()
 
 	const { themes, setThemes } = usePalettez(() => stores[storeKey], {
 		initOnMount: true,
 	})
 
-	return themesAndOptions.map((theme) => (
-		<div key={theme.key}>
+	return themesAndOptions.map(([theme, options]) => (
+		<div key={theme}>
 			<input type='hidden' name='key' value={storeKey} />
-			<label htmlFor={theme.key}>{theme.label}</label>{' '}
+			<label htmlFor={theme}>{theme}</label>{' '}
 			<select
-				id={theme.key}
-				name={theme.key}
+				id={theme}
+				name={theme}
 				onChange={(e) => {
-					setThemes({ [theme.key]: e.target.value })
+					setThemes({ [theme]: e.target.value })
 				}}
-				value={themes[theme.key]}
+				value={themes[theme]}
 			>
-				{theme.options.map((option) => (
-					<option key={option.key} value={option.key}>
-						{option.value}
+				{options.map((option) => (
+					<option key={option} value={option}>
+						{option}
 					</option>
 				))}
 			</select>

demos/astro/src/pages/index.astro

@@ -1,35 +1,21 @@
 ---
-import { getThemesAndOptions } from 'palettez'
+import { type ThemeConfig, getThemesAndOptions } from 'palettez'
 import palettez from 'palettez/raw?raw'
 import { singleStoreScript } from './_single-store-script'
 import { ThemeSelect } from './_sync-theme-select'
 import './_style.css'
 
 const config = {
-	colorScheme: {
-		label: 'Color scheme',
-		options: {
-			system: {
-				value: 'System',
-				isDefault: true,
-				media: {
-					query: '(prefers-color-scheme: dark)',
-					ifMatch: 'dark',
-					ifNotMatch: 'light',
-				},
-			},
-			light: { value: 'Light' },
-			dark: { value: 'Dark' },
+	colorScheme: [
+		{
+			value: 'system',
+			media: ['(prefers-color-scheme: dark)', 'dark', 'light'],
 		},
-	},
-	contrast: {
-		label: 'Contrast',
-		options: {
-			standard: { value: 'Standard', isDefault: true },
-			high: { value: 'High' },
-		},
-	},
-}
+		'light',
+		'dark',
+	],
+	contrast: ['standard', 'high'],
+} as const satisfies ThemeConfig
 
 const themesAndOptions = getThemesAndOptions(config)
 

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

@@ -1,5 +1,5 @@
 ---
-import { getThemesAndOptions } from 'palettez'
+import { type ThemeConfig, getThemesAndOptions } from 'palettez'
 import palettez from 'palettez/raw?raw'
 import { createStoresScript } from './_multi-store-scripts'
 import { ThemeSelect } from './_sync-theme-select'
@@ -9,30 +9,16 @@ import './_style.css'
 export const prerender = false
 
 const config = {
-	colorScheme: {
-		label: 'Color scheme',
-		options: {
-			system: {
-				value: 'System',
-				isDefault: true,
-				media: {
-					query: '(prefers-color-scheme: dark)',
-					ifMatch: 'dark',
-					ifNotMatch: 'light',
-				},
-			},
-			light: { value: 'Light' },
-			dark: { value: 'Dark' },
+	colorScheme: [
+		{
+			value: 'system',
+			media: ['(prefers-color-scheme: dark)', 'dark', 'light'],
 		},
-	},
-	contrast: {
-		label: 'Contrast',
-		options: {
-			standard: { value: 'Standard', isDefault: true },
-			high: { value: 'High' },
-		},
-	},
-}
+		'light',
+		'dark',
+	],
+	contrast: ['standard', 'high'],
+} as const satisfies ThemeConfig
 
 const themeStoreKeys = ['app', 'section1', 'section2']
 

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

@@ -1,35 +1,21 @@
 ---
-import { getThemesAndOptions } from 'palettez'
+import { type ThemeConfig, getThemesAndOptions } from 'palettez'
 import { Page } from './_no-hydration-mismatch'
 import './_style.css'
 
 export const prerender = false
 
 const config = {
-	colorScheme: {
-		label: 'Color scheme',
-		options: {
-			// system: {
-			// 	value: 'System',
-			// 	isDefault: true,
-			// 	media: {
-			// 		query: '(prefers-color-scheme: dark)',
-			// 		ifMatch: 'dark',
-			// 		ifNotMatch: 'light',
-			// 	},
-			// },
-			light: { value: 'Light' },
-			dark: { value: 'Dark' },
-		},
-	},
-	contrast: {
-		label: 'Contrast',
-		options: {
-			standard: { value: 'Standard', isDefault: true },
-			high: { value: 'High' },
-		},
-	},
-}
+	colorScheme: [
+		// {
+		// 	value: 'system',
+		// 	media: ['(prefers-color-scheme: dark)', 'dark', 'light'],
+		// },
+		'light',
+		'dark',
+	],
+	contrast: ['standard', 'high'],
+} as const satisfies ThemeConfig
 
 const configsByKey = {
 	app: config,

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

@@ -1,34 +1,20 @@
 import { cookies } from 'next/headers'
-import { getThemesAndOptions } from 'palettez'
+import { type ThemeConfig, getThemesAndOptions } from 'palettez'
 import { createStoresScript } from '../../lib/multi-store-scripts'
 import { ThemeSelect } from '../../lib/sync-theme-select'
 import { ThemeWrapper } from '../../lib/sync-theme-wrapper'
 
 const config = {
-	colorScheme: {
-		label: 'Color scheme',
-		options: {
-			system: {
-				value: 'System',
-				isDefault: true,
-				media: {
-					query: '(prefers-color-scheme: dark)',
-					ifMatch: 'dark',
-					ifNotMatch: 'light',
-				},
-			},
-			light: { value: 'Light' },
-			dark: { value: 'Dark' },
-		},
-	},
-	contrast: {
-		label: 'Contrast',
-		options: {
-			standard: { value: 'Standard', isDefault: true },
-			high: { value: 'High' },
+	colorScheme: [
+		{
+			value: 'system',
+			media: ['(prefers-color-scheme: dark)', 'dark', 'light'],
 		},
-	},
-}
+		'light',
+		'dark',
+	],
+	contrast: ['standard', 'high'],
+} as const satisfies ThemeConfig
 
 const themeStoreKeys = ['app', 'section1', 'section2']