@just-web/toolkits 1.0.0 → 2.0.0

package/src/theme/data-attribute/parse-data-attribute.ts

@@ -0,0 +1,25 @@
+import { matchAttributeValueToTheme } from '../_utils/match-attribute-value-to-theme.ts'
+import { themeEntry } from '../theme-entry.ts'
+import type { ThemeEntry } from '../theme-entry.types.ts'
+import type { ThemeMap } from '../theme-map.types.ts'
+import { SEPARATOR_SPACE } from './_constant.ts'
+
+/**
+ * Parses a data attribute value string into a ThemeEntry.
+ *
+ * Pure function: no DOM access. Uses first token when separator is defined.
+ *
+ * @param themes - Record mapping theme keys to attribute values
+ * @param value - Raw attribute value string (e.g. from getAttribute)
+ * @param options.separator - When defined, split by separator and use first token (default: space)
+ * @returns ThemeEntry if a match is found, otherwise undefined
+ */
+export function parseDataAttribute<Themes extends ThemeMap>(
+	themes: Themes,
+	value: string | undefined,
+	options?: { separator?: string | undefined } | undefined
+): ThemeEntry<Themes> | undefined {
+	const separator = options?.separator ?? SEPARATOR_SPACE
+	const theme = matchAttributeValueToTheme(themes, value ?? null, { separator })
+	return theme !== undefined ? themeEntry(themes, theme) : undefined
+}

package/src/theme/data-attribute/read-data-attribute.ts

@@ -0,0 +1,29 @@
+import { getDataAttribute } from '../../attributes/get-data-attribute.ts'
+import type { ParseStoredTheme, ThemeEntry } from '../theme-entry.types.ts'
+import type { ThemeMap } from '../theme-map.types.ts'
+import { SEPARATOR_SPACE } from './_constant.ts'
+import { parseDataAttribute } from './parse-data-attribute.ts'
+
+/**
+ * Reads a theme entry from a data attribute on an element.
+ *
+ * @param themes - Record mapping theme keys to attribute values
+ * @param attributeName - Data attribute name (e.g. `data-theme`)
+ * @param options.element - Element to read from (defaults to document.documentElement)
+ * @param options.parse - Custom parser (default: parseDataAttribute with space separator)
+ * @returns ThemeEntry if found, undefined otherwise. Returns undefined when element is not available (e.g. SSR).
+ */
+export function readDataAttribute<Themes extends ThemeMap>(
+	themes: Themes,
+	attributeName: `data-${string}`,
+	options?:
+		| { element?: Element | undefined; parse?: ParseStoredTheme<Themes> | undefined }
+		| undefined
+): ThemeEntry<Themes> | undefined {
+	const element = options?.element ?? document?.documentElement
+	if (!element) return undefined
+	const parse =
+		options?.parse ?? ((t, v) => parseDataAttribute(t, v, { separator: SEPARATOR_SPACE }))
+	const raw = getDataAttribute(attributeName, element) ?? undefined
+	return parse(themes, raw)
+}

package/src/theme/data-attribute/stringify-data-attribute.ts

@@ -0,0 +1,39 @@
+import { resolveThemeMapValue } from '../_utils/resolve-theme-map-value.ts'
+import type { ThemeEntry } from '../theme-entry.types.ts'
+import type { ThemeMap } from '../theme-map.types.ts'
+import { SEPARATOR_SPACE } from './_constant.ts'
+
+/**
+ * Stringifies a ThemeEntry for a data attribute value.
+ *
+ * Pure function: no DOM access. Removes all theme values from existing, then adds entry's value(s).
+ * Aligns with stringifyClassName logic.
+ *
+ * @param themes - Record mapping theme keys to attribute values (used to identify theme tokens)
+ * @param existing - Current attribute value string
+ * @param entry - Theme entry to stringify, or undefined to clear theme (keeps non-theme tokens)
+ * @param options.separator - Token separator (default: space)
+ * @returns Attribute value string
+ */
+export function stringifyDataAttribute<Themes extends ThemeMap>(
+	themes: Themes,
+	existing: string | undefined,
+	entry: ThemeEntry<Themes> | undefined,
+	options?: { separator?: string | undefined } | undefined
+): string {
+	const separator = options?.separator ?? SEPARATOR_SPACE
+	const allThemeValues = Object.values(themes).flatMap((v) => {
+		const resolved = resolveThemeMapValue(v)
+		return Array.isArray(resolved) ? [...resolved] : [resolved]
+	})
+	const existingTokens = existing?.trim() ? existing.trim().split(separator) : []
+	const withoutThemeValues = existingTokens.filter((t) => !allThemeValues.includes(t.trim()))
+	const newTokens =
+		entry !== undefined
+			? (() => {
+					const resolved = resolveThemeMapValue(entry.value)
+					return Array.isArray(resolved) ? [resolved[0]] : [resolved]
+				})()
+			: []
+	return [...withoutThemeValues, ...newTokens].filter(Boolean).join(separator)
+}

package/src/theme/data-attribute/subscribe-data-attribute.ts

@@ -0,0 +1,39 @@
+import { observeDataAttributes } from '../../attributes/observe-data-attribute.ts'
+import type { ParseStoredTheme, ThemeEntry } from '../theme-entry.types.ts'
+import type { ThemeMap } from '../theme-map.types.ts'
+import { SEPARATOR_SPACE } from './_constant.ts'
+import { parseDataAttribute } from './parse-data-attribute.ts'
+
+/**
+ * Subscribes to changes on a data attribute and invokes the handler with parsed theme entries.
+ *
+ * @param themes - Record mapping theme keys to attribute values
+ * @param attributeName - Data attribute name (e.g. `data-theme`)
+ * @param handler - Callback invoked when the attribute changes
+ * @param options.element - Element to observe (defaults to document.documentElement)
+ * @param options.parse - Custom parser (default: parseDataAttribute with space separator)
+ * @returns Unsubscribe function. Returns a no-op function when element is not available (e.g. SSR).
+ */
+export function subscribeDataAttribute<Themes extends ThemeMap>(
+	themes: Themes,
+	attributeName: `data-${string}`,
+	handler: (entry: ThemeEntry<Themes> | undefined) => void,
+	options?:
+		| { element?: Element | undefined; parse?: ParseStoredTheme<Themes> | undefined }
+		| undefined
+): () => void {
+	const element = options?.element ?? document?.documentElement
+	if (!element) return () => {}
+	const parse =
+		options?.parse ?? ((t, v) => parseDataAttribute(t, v, { separator: SEPARATOR_SPACE }))
+	const observer = observeDataAttributes<string, `data-${string}`>(
+		{
+			[attributeName]: (value) => {
+				const entry = parse(themes, value ?? undefined)
+				handler(entry)
+			}
+		},
+		element
+	)
+	return () => observer.disconnect()
+}

package/src/theme/data-attribute/write-data-attribute.ts

@@ -0,0 +1,40 @@
+import { getDataAttribute } from '../../attributes/get-data-attribute.ts'
+import type { StringifyStoredTheme, ThemeEntry } from '../theme-entry.types.ts'
+import type { ThemeMap } from '../theme-map.types.ts'
+import { SEPARATOR_SPACE } from './_constant.ts'
+import { stringifyDataAttribute } from './stringify-data-attribute.ts'
+
+/**
+ * Writes a theme entry to a data attribute on an element.
+ *
+ * @param themes - Record mapping theme keys to attribute values
+ * @param attributeName - Data attribute name (e.g. `data-theme`)
+ * @param entry - Theme entry to write, or undefined to remove the theme
+ * @param options.element - Element to write to (defaults to document.documentElement)
+ * @param options.stringify - Custom serializer (default: stringifyDataAttribute with space separator)
+ */
+export function writeDataAttribute<Themes extends ThemeMap>(
+	themes: Themes,
+	attributeName: `data-${string}`,
+	entry: ThemeEntry<Themes> | undefined,
+	options?:
+		| { element?: Element | undefined; stringify?: StringifyStoredTheme<Themes> | undefined }
+		| undefined
+): void {
+	const element = options?.element ?? document?.documentElement
+	if (!element) return
+	const stringify =
+		options?.stringify ??
+		((t, x, e) => stringifyDataAttribute(t, x, e, { separator: SEPARATOR_SPACE }))
+	if (entry === undefined) {
+		element.removeAttribute(attributeName)
+		return
+	}
+	const existing = getDataAttribute(attributeName, element) ?? undefined
+	const result = stringify(themes, existing, entry)
+	if (result === '') {
+		element.removeAttribute(attributeName)
+	} else {
+		element.setAttribute(attributeName, result)
+	}
+}

package/src/theme/local-storage/read-local-storage.ts

@@ -0,0 +1,23 @@
+import type { ParseStoredTheme, ThemeEntry } from '../theme-entry.types.ts'
+import type { ThemeMap } from '../theme-map.types.ts'
+import { readWebStorage } from '../web-storage/read-web-storage.ts'
+
+/**
+ * Reads a theme entry from localStorage.
+ *
+ * @param themes - Record mapping theme keys to values (for validation)
+ * @param storageKey - localStorage key to read from
+ * @param options.parse - Custom parser (default: parseStoredTheme)
+ * @returns ThemeEntry if found, undefined otherwise. Returns undefined when localStorage is unavailable (e.g. SSR).
+ */
+export function readLocalStorage<Themes extends ThemeMap>(
+	themes: Themes,
+	storageKey: string,
+	options?: { parse?: ParseStoredTheme<Themes> | undefined }
+): ThemeEntry<Themes> | undefined {
+	if (!window?.localStorage) return undefined
+	return readWebStorage(themes, storageKey, {
+		storage: window.localStorage,
+		parse: options?.parse
+	})
+}

package/src/theme/local-storage/write-local-storage.ts

@@ -0,0 +1,31 @@
+import type { StringifyStoredTheme, ThemeEntry } from '../theme-entry.types.ts'
+import type { ThemeMap } from '../theme-map.types.ts'
+import { writeWebStorage } from '../web-storage/write-web-storage.ts'
+
+/**
+ * Writes a theme entry to localStorage.
+ *
+ * Performs setItem/removeItem only. Does not notify subscribers; the store must call notify() after this.
+ *
+ * @param themes - Record mapping theme keys to values (used by stringify)
+ * @param storageKey - localStorage key to write to
+ * @param entry - Theme entry to write, or undefined to remove
+ * @param options.stringify - Custom serializer (default: JSON.stringify)
+ * @param options.onError - Optional callback invoked when storage write throws
+ */
+export function writeLocalStorage<Themes extends ThemeMap>(
+	themes: Themes,
+	storageKey: string,
+	entry: ThemeEntry<Themes> | undefined,
+	options?: {
+		stringify?: StringifyStoredTheme<Themes> | undefined
+		onError?: ((error: unknown) => void) | undefined
+	}
+): void {
+	if (!window?.localStorage) return
+	writeWebStorage(themes, storageKey, entry, {
+		storage: window.localStorage,
+		stringify: options?.stringify,
+		onError: options?.onError
+	})
+}

package/src/theme/prefers-color-scheme-theme/read-prefers-color-scheme-theme.ts

@@ -0,0 +1,30 @@
+import { getPrefersColorScheme } from '../../color-scheme/get-prefers-color-scheme.ts'
+import { themeEntry } from '../theme-entry.ts'
+import type { ThemeEntry } from '../theme-entry.types.ts'
+
+type PrefersColorSchemeThemes = {
+	light: string | readonly string[]
+	dark: string | readonly string[]
+}
+
+export interface ReadPrefersColorSchemeThemeOptions {
+	defaultColorScheme?: 'light' | 'dark' | undefined
+}
+
+/**
+ * Reads a theme entry from the system `prefers-color-scheme` media query.
+ *
+ * Themes must only include `light` and `dark` keys—this mirrors the system preference.
+ *
+ * @param themes - Record with `light` and `dark` keys mapping to theme values
+ * @param options.defaultColorScheme - Fallback when matchMedia is unavailable (e.g. SSR, default: 'light')
+ * @returns ThemeEntry for current system preference
+ */
+export function readPrefersColorSchemeTheme<Themes extends PrefersColorSchemeThemes>(
+	themes: Themes,
+	options?: ReadPrefersColorSchemeThemeOptions | undefined
+): ThemeEntry<Themes> {
+	const defaultColorScheme = options?.defaultColorScheme ?? 'light'
+	const scheme = getPrefersColorScheme(defaultColorScheme)
+	return themeEntry(themes, scheme)
+}

package/src/theme/prefers-color-scheme-theme/subscribe-prefers-color-scheme-theme.ts

@@ -0,0 +1,24 @@
+import { observePrefersColorScheme } from '../../color-scheme/observe-prefers-color-scheme.ts'
+import { themeEntry } from '../theme-entry.ts'
+import type { ThemeEntry } from '../theme-entry.types.ts'
+
+type PrefersColorSchemeThemes = {
+	light: string | readonly string[]
+	dark: string | readonly string[]
+}
+
+/**
+ * Subscribes to system `prefers-color-scheme` changes and invokes the handler with theme entries.
+ *
+ * Themes must only include `light` and `dark` keys—this mirrors the system preference.
+ *
+ * @param themes - Record with `light` and `dark` keys mapping to theme values
+ * @param handler - Callback invoked when the color scheme preference changes
+ * @returns Unsubscribe function
+ */
+export function subscribePrefersColorSchemeTheme<Themes extends PrefersColorSchemeThemes>(
+	themes: Themes,
+	handler: (entry: ThemeEntry<Themes>) => void
+): () => void {
+	return observePrefersColorScheme((scheme) => handler(themeEntry(themes, scheme)))
+}

package/src/theme/session-storage/read-session-storage.ts

@@ -0,0 +1,23 @@
+import type { ParseStoredTheme, ThemeEntry } from '../theme-entry.types.ts'
+import type { ThemeMap } from '../theme-map.types.ts'
+import { readWebStorage } from '../web-storage/read-web-storage.ts'
+
+/**
+ * Reads a theme entry from sessionStorage.
+ *
+ * @param themes - Record mapping theme keys to values (for validation)
+ * @param storageKey - sessionStorage key to read from
+ * @param options.parse - Custom parser (default: parseStoredTheme)
+ * @returns ThemeEntry if found, undefined otherwise. Returns undefined when sessionStorage is unavailable (e.g. SSR).
+ */
+export function readSessionStorage<Themes extends ThemeMap>(
+	themes: Themes,
+	storageKey: string,
+	options?: { parse?: ParseStoredTheme<Themes> | undefined }
+): ThemeEntry<Themes> | undefined {
+	if (!window?.sessionStorage) return undefined
+	return readWebStorage(themes, storageKey, {
+		storage: window.sessionStorage,
+		parse: options?.parse
+	})
+}

package/src/theme/session-storage/write-session-storage.ts

@@ -0,0 +1,31 @@
+import type { StringifyStoredTheme, ThemeEntry } from '../theme-entry.types.ts'
+import type { ThemeMap } from '../theme-map.types.ts'
+import { writeWebStorage } from '../web-storage/write-web-storage.ts'
+
+/**
+ * Writes a theme entry to sessionStorage.
+ *
+ * Performs setItem/removeItem only. Does not notify subscribers; the store must call notify() after this.
+ *
+ * @param themes - Record mapping theme keys to values (used by stringify)
+ * @param storageKey - sessionStorage key to write to
+ * @param entry - Theme entry to write, or undefined to remove
+ * @param options.stringify - Custom serializer (default: JSON.stringify)
+ * @param options.onError - Optional callback invoked when storage write throws
+ */
+export function writeSessionStorage<Themes extends ThemeMap>(
+	themes: Themes,
+	storageKey: string,
+	entry: ThemeEntry<Themes> | undefined,
+	options?: {
+		stringify?: StringifyStoredTheme<Themes> | undefined
+		onError?: ((error: unknown) => void) | undefined
+	}
+): void {
+	if (!window?.sessionStorage) return
+	writeWebStorage(themes, storageKey, entry, {
+		storage: window.sessionStorage,
+		stringify: options?.stringify,
+		onError: options?.onError
+	})
+}

package/src/theme/theme-entry.types.ts

@@ -9,3 +9,22 @@ export interface ThemeEntry<Themes extends ThemeMap = ThemeMap> {
 	theme: keyof Themes
 	value: Themes[keyof Themes]
 }
+
+/**
+ * Function type for parsing stored string into ThemeEntry.
+ * Used as options.parse in persisting theme stores.
+ */
+export type ParseStoredTheme<Themes extends ThemeMap> = (
+	themes: Themes,
+	value: string | undefined
+) => ThemeEntry<Themes> | undefined
+
+/**
+ * Function type for stringify ThemeEntry to a stored string.
+ * Used as options.stringify in persisting theme stores.
+ */
+export type StringifyStoredTheme<Themes extends ThemeMap> = (
+	themes: Themes,
+	existing: string | undefined,
+	entry: ThemeEntry<Themes> | undefined
+) => string

package/src/theme/theme-map.types.ts

@@ -1,6 +1,13 @@
+/**
+ * Polymorphic theme value: string, array, or object with themeValue.
+ * The object form allows storing extra user metadata in persistent stores (localStorage, etc.).
+ */
+export type ThemeMapValue = string | readonly string[] | { themeValue: string | readonly string[] }
+
 /**
  * Record mapping theme keys to their values.
- * Each value can be a single string or readonly string[] (e.g. multiple CSS classes).
+ * Each value can be a single string, readonly string[] (e.g. multiple CSS classes),
+ * or { themeValue: string | string[] } for polymorphic values with extra metadata.
  * Used by all ThemeStore factories via the themes option.
  */
-export type ThemeMap<Theme extends string = string> = Record<Theme, string | readonly string[]>
+export type ThemeMap<Theme extends string = string> = Record<Theme, ThemeMapValue>

package/src/theme/theme-store/class-name-theme-store/class-name-theme-store.ts

@@ -1,9 +1,11 @@
 import type { Required } from 'type-plus'
-import { observeAttributes } from '../../../attributes/observe-attribute.ts'
 import { dummyThemeStore } from '../../../testing/theme/dummy-theme-store.ts'
-import { applyThemeToClassName } from '../../class-name/apply-theme-to-class-name.ts'
-import { resolveThemeFromClassName } from '../../class-name/resolve-theme-from-class-name.ts'
-import { themeEntry } from '../../theme-entry.ts'
+import { parseClassName } from '../../class-name/parse-class-name.ts'
+import { readClassName } from '../../class-name/read-class-name.ts'
+import { stringifyClassName } from '../../class-name/stringify-class-name.ts'
+import { subscribeClassName } from '../../class-name/subscribe-class-name.ts'
+import { writeClassName } from '../../class-name/write-class-name.ts'
+import type { ParseStoredTheme, StringifyStoredTheme } from '../../theme-entry.types.ts'
 import type { ThemeMap } from '../../theme-map.types.ts'
 import type { ThemeStore } from '../theme-store.types.ts'
 
@@ -12,6 +14,8 @@ import type { ThemeStore } from '../theme-store.types.ts'
  *
  * @param themes - Record mapping theme keys to class name(s)
  * @param options.element - Element to operate on (defaults to document.documentElement)
+ * @param options.parse - Custom parser (default: parseClassName)
+ * @param options.stringify - Custom serializer (default: stringifyClassName)
  * @returns ThemeStore
  *
  * @example
@@ -25,38 +29,28 @@ import type { ThemeStore } from '../theme-store.types.ts'
  */
 export function classNameThemeStore<Themes extends ThemeMap>(
 	themes: Themes,
-	options?: { element?: Element | undefined }
+	options?: {
+		element?: Element | undefined
+		parse?: ParseStoredTheme<Themes> | undefined
+		stringify?: StringifyStoredTheme<Themes> | undefined
+	}
 ): Required<ThemeStore<Themes>> {
 	const element = options?.element ?? document?.documentElement
 
 	if (!element) return dummyThemeStore
 
+	const parse = options?.parse ?? parseClassName
+	const stringify = options?.stringify ?? stringifyClassName
+
 	return {
 		read() {
-			const theme = resolveThemeFromClassName(themes, element.className)
-			if (theme === undefined) return undefined
-			return themeEntry(themes, theme)
+			return readClassName(themes, { element, parse })
 		},
 		write(entry) {
-			applyThemeToClassName(themes, element, entry)
+			writeClassName(themes, entry, { element, stringify })
 		},
 		subscribe(handler) {
-			let lastEmitted: keyof Themes | undefined | null = null
-			const observer = observeAttributes(
-				{
-					class: (value) => {
-						const theme = value ? resolveThemeFromClassName(themes, value) : undefined
-						const entry = theme ? themeEntry(themes, theme) : undefined
-						const key = theme ?? undefined
-
-						if (lastEmitted === key) return
-						lastEmitted = key
-						handler(entry)
-					}
-				},
-				element
-			)
-			return () => observer.disconnect()
+			return subscribeClassName(themes, handler, { element, parse })
 		}
 	}
 }

package/src/theme/theme-store/cookie-theme-store/cookie-theme-store.ts

@@ -1,48 +1,20 @@
 import type { Required } from 'type-plus'
 import { dummyThemeStore } from '../../../testing/theme/dummy-theme-store.ts'
 import { parseStoredTheme } from '../../_utils/parse-stored-theme.ts'
-import { themeEntry } from '../../theme-entry.ts'
-import type { ThemeEntry } from '../../theme-entry.types.ts'
+import { getCookieFromHeader } from '../../cookie/_cookie-utils.ts'
+import { readCookieTheme } from '../../cookie/read-cookie-theme.ts'
+import { writeCookieTheme } from '../../cookie/write-cookie-theme.ts'
+import type { ParseStoredTheme, ThemeEntry } from '../../theme-entry.types.ts'
 import type { ThemeMap } from '../../theme-map.types.ts'
 import type { ThemeStore } from '../theme-store.types.ts'
 
-export interface CookieThemeStoreOptions {
+export interface CookieThemeStoreOptions<Themes extends ThemeMap = ThemeMap> {
 	cookieName: string
 	path?: string | undefined
 	maxAge?: number | undefined
 	sameSite?: 'lax' | 'strict' | 'none' | undefined
 	secure?: boolean | undefined
-}
-
-function getCookieValue(name: string): string | null {
-	if (typeof document === 'undefined' || !document.cookie) return null
-	const match = document.cookie.match(new RegExp(`(?:^|;\\s*)${name}=([^;]*)`))
-	const value = match?.[1]
-	return value !== undefined ? decodeURIComponent(value) : null
-}
-
-function setCookie(
-	name: string,
-	value: string,
-	options: {
-		path?: string | undefined
-		maxAge?: number | undefined
-		sameSite?: 'lax' | 'strict' | 'none' | undefined
-		secure?: boolean | undefined
-	}
-) {
-	const parts = [`${name}=${encodeURIComponent(value)}`]
-	parts.push(`path=${options.path ?? '/'}`)
-	if (options.maxAge !== undefined) parts.push(`max-age=${options.maxAge}`)
-	if (options.sameSite !== undefined) parts.push(`samesite=${options.sameSite}`)
-	if (options.secure) parts.push('secure')
-	// biome-ignore lint/suspicious/noDocumentCookie: Cookie Store API has limited support; document.cookie is standard for theme persistence
-	document.cookie = parts.join('; ')
-}
-
-function deleteCookie(name: string, path = '/') {
-	// biome-ignore lint/suspicious/noDocumentCookie: Cookie Store API has limited support; document.cookie is standard for theme persistence
-	document.cookie = `${name}=; path=${path}; max-age=0`
+	parse?: ParseStoredTheme<Themes> | undefined
 }
 
 /**
@@ -58,6 +30,7 @@ function deleteCookie(name: string, path = '/') {
  * @param options.maxAge - Cookie max-age in seconds
  * @param options.sameSite - Cookie sameSite attribute
  * @param options.secure - Cookie secure attribute
+ * @param options.parse - Optional custom parser for stored string (default: parseStoredTheme)
  * @returns ThemeStore
  *
  * @example
@@ -71,9 +44,9 @@ function deleteCookie(name: string, path = '/') {
  */
 export function cookieThemeStore<Themes extends ThemeMap>(
 	themes: Themes,
-	options: CookieThemeStoreOptions
+	options: CookieThemeStoreOptions<Themes>
 ): Required<ThemeStore<Themes>> {
-	const { cookieName, path = '/', maxAge, sameSite, secure } = options
+	const { cookieName, path = '/', maxAge, sameSite, secure, parse = parseStoredTheme } = options
 
 	if (document.cookie === undefined) {
 		return dummyThemeStore
@@ -83,10 +56,7 @@ export function cookieThemeStore<Themes extends ThemeMap>(
 	let lastNotifiedKey: keyof Themes | undefined = read()?.theme ?? undefined
 
 	function read() {
-		const stored = getCookieValue(cookieName)
-		const theme = parseStoredTheme(themes, stored)
-		if (theme === undefined) return undefined
-		return themeEntry(themes, theme)
+		return readCookieTheme(themes, { cookieName, path, parse })
 	}
 
 	function notify() {
@@ -101,20 +71,13 @@ export function cookieThemeStore<Themes extends ThemeMap>(
 		read,
 		write(entry) {
 			try {
-				if (entry === undefined) {
-					deleteCookie(cookieName, path)
-				} else {
-					const opts: {
-						path: string
-						maxAge?: number
-						sameSite?: 'lax' | 'strict' | 'none'
-						secure?: boolean
-					} = { path }
-					if (maxAge !== undefined) opts.maxAge = maxAge
-					if (sameSite !== undefined) opts.sameSite = sameSite
-					if (secure) opts.secure = true
-					setCookie(cookieName, JSON.stringify(entry), opts)
-				}
+				writeCookieTheme(themes, entry, {
+					cookieName,
+					path,
+					maxAge,
+					sameSite,
+					secure
+				})
 				notify()
 			} catch {
 				// Ignore quota or other errors
@@ -129,12 +92,6 @@ export function cookieThemeStore<Themes extends ThemeMap>(
 	} satisfies ThemeStore<Themes>
 }
 
-function getCookieFromHeader(cookieHeader: string, name: string): string | null {
-	const match = cookieHeader.match(new RegExp(`(?:^|;\\s*)${name}=([^;]*)`))
-	const value = match?.[1]
-	return value !== undefined ? decodeURIComponent(value.trim()) : null
-}
-
 /**
  * Reads the theme from cookies during SSR. Use with the request's Cookie header or
  * a framework's cookie API (e.g. Next.js cookies()).
@@ -168,7 +125,5 @@ export function getThemeFromCookie<Themes extends ThemeMap>(
 			: cookieSource
 				? getCookieFromHeader(cookieSource, cookieName)
 				: null
-	const theme = parseStoredTheme(themes, stored)
-	if (theme === undefined) return undefined
-	return themeEntry(themes, theme)
+	return parseStoredTheme(themes, stored ?? undefined)
 }