theme-watcher 0.1.0 → 0.1.1

package/README.md

@@ -40,6 +40,8 @@ Props:
 - `storageKey?: string` default: `"theme-watcher"`
 - `attribute?: "data-theme" | "class"` default: `"data-theme"`
 - `defaultTheme?: "light" | "dark" | "system"` default: `"system"`
+- `enableColorScheme?: boolean` default: `true`
+- `variables?: { light?: Record<string, string>; dark?: Record<string, string> }`
 
 ### `useTheme()`
 
@@ -57,6 +59,32 @@ Returns:
 - Cross-tab updates are synced through `storage` events.
 - Package is ESM-only.
 
+## CSS variable support
+
+```tsx
+<ThemeWatcher
+  variables={{
+    light: {
+      "--background": "#ffffff",
+      "--foreground": "#111111"
+    },
+    dark: {
+      "--background": "#111111",
+      "--foreground": "#ffffff"
+    }
+  }}
+/>
+```
+
+Then in CSS:
+
+```css
+body {
+  background: var(--background);
+  color: var(--foreground);
+}
+```
+
 ## Development
 
 This repo uses Bun for package management and scripts, but the published package has no Bun runtime dependency.

package/dist/index.d.ts

@@ -2,6 +2,7 @@ type Theme = "light" | "dark";
 type ThemePreference = Theme | "system";
 type ThemeSource = "prop" | "storage" | "default" | "system";
 type ThemeAttribute = "data-theme" | "class";
+type ThemeVariables = Partial<Record<Theme, Record<string, string>>>;
 interface ThemeState {
     theme: ThemePreference;
     resolvedTheme: Theme;
@@ -12,13 +13,15 @@ interface ThemeWatcherProps {
     storageKey?: string;
     attribute?: ThemeAttribute;
     defaultTheme?: ThemePreference;
+    variables?: ThemeVariables;
+    enableColorScheme?: boolean;
 }
 interface ThemeApi extends ThemeState {
     set: (theme: ThemePreference) => void;
     get: () => ThemePreference;
 }
 
-declare function ThemeWatcher({ theme, storageKey, attribute, defaultTheme }: ThemeWatcherProps): null;
+declare function ThemeWatcher({ theme, storageKey, attribute, defaultTheme, variables, enableColorScheme }: ThemeWatcherProps): null;
 
 declare function useTheme(): ThemeApi;
 

package/dist/index.js

@@ -5,7 +5,8 @@ import { useEffect } from "react";
 var DEFAULT_CONFIG = {
   storageKey: "theme-watcher",
   attribute: "data-theme",
-  defaultTheme: "system"
+  defaultTheme: "system",
+  enableColorScheme: true
 };
 var VALID_PREFERENCES = /* @__PURE__ */ new Set(["light", "dark", "system"]);
 var config = { ...DEFAULT_CONFIG };
@@ -71,6 +72,29 @@ function applyDomTheme(resolvedTheme) {
   }
   root.setAttribute("data-theme", resolvedTheme);
 }
+function applyThemeVariables(resolvedTheme) {
+  if (!isBrowserReady()) return;
+  const root = document.documentElement;
+  const lightVars = config.variables?.light ?? {};
+  const darkVars = config.variables?.dark ?? {};
+  const allKeys = /* @__PURE__ */ new Set([...Object.keys(lightVars), ...Object.keys(darkVars)]);
+  for (const key of allKeys) {
+    root.style.removeProperty(key);
+  }
+  const nextVars = config.variables?.[resolvedTheme];
+  if (!nextVars) return;
+  for (const [key, value] of Object.entries(nextVars)) {
+    root.style.setProperty(key, value);
+  }
+}
+function applyColorScheme(resolvedTheme) {
+  if (!isBrowserReady()) return;
+  if (!config.enableColorScheme) {
+    document.documentElement.style.removeProperty("color-scheme");
+    return;
+  }
+  document.documentElement.style.setProperty("color-scheme", resolvedTheme);
+}
 function emit() {
   for (const callback of subscribers) {
     callback();
@@ -80,6 +104,8 @@ function recompute() {
   const stored = readStoredTheme();
   state = resolveTheme(controlledTheme, stored, config.defaultTheme);
   applyDomTheme(state.resolvedTheme);
+  applyThemeVariables(state.resolvedTheme);
+  applyColorScheme(state.resolvedTheme);
   emit();
 }
 function handleMediaChange() {
@@ -137,6 +163,8 @@ function setTheme(theme) {
   writeStoredTheme(theme);
   state = resolveTheme(controlledTheme, theme, config.defaultTheme);
   applyDomTheme(state.resolvedTheme);
+  applyThemeVariables(state.resolvedTheme);
+  applyColorScheme(state.resolvedTheme);
   emit();
 }
 function getTheme() {
@@ -158,11 +186,13 @@ function ThemeWatcher({
   theme,
   storageKey = "theme-watcher",
   attribute = "data-theme",
-  defaultTheme = "system"
+  defaultTheme = "system",
+  variables,
+  enableColorScheme = true
 }) {
   useEffect(() => {
-    return mountWatcher({ storageKey, attribute, defaultTheme }, theme);
-  }, [theme, storageKey, attribute, defaultTheme]);
+    return mountWatcher({ storageKey, attribute, defaultTheme, variables, enableColorScheme }, theme);
+  }, [theme, storageKey, attribute, defaultTheme, variables, enableColorScheme]);
   return null;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "theme-watcher",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Plug-and-play theme watcher for React SPAs",
   "type": "module",
   "main": "./dist/index.js",