theme-watcher 0.1.0 → 0.1.2

package/README.md

@@ -38,8 +38,10 @@ Mount once near your app root.
 Props:
 - `theme?: "light" | "dark"` controlled override
 - `storageKey?: string` default: `"theme-watcher"`
-- `attribute?: "data-theme" | "class"` default: `"data-theme"`
+- `attribute?: "data-theme" | "class" | "both"` default: `"both"`
 - `defaultTheme?: "light" | "dark" | "system"` default: `"system"`
+- `enableColorScheme?: boolean` default: `true`
+- `variables?: { light?: Record<string, string>; dark?: Record<string, string> }`
 
 ### `useTheme()`
 
@@ -48,6 +50,7 @@ Returns:
 - `resolvedTheme` active applied theme (`"light" | "dark"`)
 - `source` where the current value came from (`"prop" | "storage" | "default" | "system"`)
 - `set(theme)` set and persist preference
+- `setTheme(theme)` alias for compatibility with next-themes-style usage
 - `get()` get persisted preference
 
 ## Behavior notes
@@ -55,8 +58,35 @@ Returns:
 - Priority order: `theme prop` -> `localStorage` -> `defaultTheme` -> system theme.
 - `system` mode updates live when `prefers-color-scheme` changes.
 - Cross-tab updates are synced through `storage` events.
+- By default, it applies both `data-theme` and `html.dark` so Tailwind/shadcn and CSS-var setups both work.
 - 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

@@ -1,7 +1,8 @@
 type Theme = "light" | "dark";
 type ThemePreference = Theme | "system";
 type ThemeSource = "prop" | "storage" | "default" | "system";
-type ThemeAttribute = "data-theme" | "class";
+type ThemeAttribute = "data-theme" | "class" | "both";
+type ThemeVariables = Partial<Record<Theme, Record<string, string>>>;
 interface ThemeState {
     theme: ThemePreference;
     resolvedTheme: Theme;
@@ -12,13 +13,16 @@ interface ThemeWatcherProps {
     storageKey?: string;
     attribute?: ThemeAttribute;
     defaultTheme?: ThemePreference;
+    variables?: ThemeVariables;
+    enableColorScheme?: boolean;
 }
 interface ThemeApi extends ThemeState {
     set: (theme: ThemePreference) => void;
+    setTheme: (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

@@ -4,8 +4,9 @@ import { useEffect } from "react";
 // src/theme-store.ts
 var DEFAULT_CONFIG = {
   storageKey: "theme-watcher",
-  attribute: "data-theme",
-  defaultTheme: "system"
+  attribute: "both",
+  defaultTheme: "system",
+  enableColorScheme: true
 };
 var VALID_PREFERENCES = /* @__PURE__ */ new Set(["light", "dark", "system"]);
 var config = { ...DEFAULT_CONFIG };
@@ -64,13 +65,38 @@ function resolveTheme(propTheme, stored, defaultTheme) {
 function applyDomTheme(resolvedTheme) {
   if (!isBrowserReady()) return;
   const root = document.documentElement;
-  if (config.attribute === "class") {
+  if (config.attribute === "class" || config.attribute === "both") {
     root.classList.toggle("dark", resolvedTheme === "dark");
-    root.classList.toggle("light", resolvedTheme === "light");
+    root.classList.remove("light");
+  }
+  if (config.attribute === "class") {
     return;
   }
   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 +106,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 +165,8 @@ function setTheme(theme) {
   writeStoredTheme(theme);
   state = resolveTheme(controlledTheme, theme, config.defaultTheme);
   applyDomTheme(state.resolvedTheme);
+  applyThemeVariables(state.resolvedTheme);
+  applyColorScheme(state.resolvedTheme);
   emit();
 }
 function getTheme() {
@@ -157,12 +187,14 @@ function getServerSnapshot() {
 function ThemeWatcher({
   theme,
   storageKey = "theme-watcher",
-  attribute = "data-theme",
-  defaultTheme = "system"
+  attribute = "both",
+  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;
 }
 
@@ -173,6 +205,7 @@ function useTheme() {
   return {
     ...state2,
     set: setTheme,
+    setTheme,
     get: getTheme
   };
 }

package/package.json

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