theme-watcher 0.1.1 → 0.1.2

package/README.md

@@ -38,7 +38,7 @@ 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> }`
@@ -50,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
@@ -57,6 +58,7 @@ 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

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 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;
@@ -18,6 +18,7 @@ interface ThemeWatcherProps {
 }
 interface ThemeApi extends ThemeState {
     set: (theme: ThemePreference) => void;
+    setTheme: (theme: ThemePreference) => void;
     get: () => ThemePreference;
 }
 

package/dist/index.js

@@ -4,7 +4,7 @@ import { useEffect } from "react";
 // src/theme-store.ts
 var DEFAULT_CONFIG = {
   storageKey: "theme-watcher",
-  attribute: "data-theme",
+  attribute: "both",
   defaultTheme: "system",
   enableColorScheme: true
 };
@@ -65,9 +65,11 @@ 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);
@@ -185,7 +187,7 @@ function getServerSnapshot() {
 function ThemeWatcher({
   theme,
   storageKey = "theme-watcher",
-  attribute = "data-theme",
+  attribute = "both",
   defaultTheme = "system",
   variables,
   enableColorScheme = true
@@ -203,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.1",
+  "version": "0.1.2",
   "description": "Plug-and-play theme watcher for React SPAs",
   "type": "module",
   "main": "./dist/index.js",