1.4.2-beta

Author: programming-with-ia

package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadcn-theme-editor",
-  "version": "1.4.1",
+  "version": "1.4.2-beta",
   "description": "Shadcn Theme Editor",
   "module": "dist/index.mjs",
   "main": "dist/index.js",

src/components/SideBarColors.tsx

@@ -31,9 +31,7 @@ function SideBarColors() {
       if (setSavedTheme(currentTheme)) return; // isSavedThemeApplied
     }
 
-    if (typeof colors == "undefined") {
-      themeEmittor.setDefaultTheme();
-    }
+    themeEmittor.setDefaultTheme();
   }, [currentTheme, isMount]);
 
   return (

src/components/item.tsx

@@ -1,5 +1,5 @@
 import { ThemeWithHSLColor } from "../lib/theme";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { Button } from "./ui/button";
 import { copy2clipboard, HSL2ComputedColor, setStyleColor } from "../lib/utils";
 import { useDebounceCallback } from "../hooks/useDebounceCallback";
@@ -13,40 +13,45 @@ export function Item({
   onSave: () => void;
 }) {
   const [color, setColor] = useState<string>("#000");
+  const hslColorRef = useRef(colord(color).toHsl());
 
   useEffect(() => {
     setColor(colord(theme.color).toHex());
   }, [theme]);
+
   const updateValue = useCallback(
-    useDebounceCallback((color: string) => {
-      setStyleColor(theme.variable, colord(color).toHsl());
-      onSave();
-    }, 0),
+    useDebounceCallback(() => {
+      setStyleColor(theme.variable, hslColorRef.current);
+      onSave(); // save to localstorage
+    }, 100),
     [theme.variable]
   );
+
+  const title =
+    theme.variable + ": " + HSL2ComputedColor(hslColorRef.current) + ";";
+
   return (
     <Button
       variant={"colorbtn"}
-      className=" select-none"
+      className="select-none"
       asChild
-      title={theme.variable + ": " + HSL2ComputedColor(theme.color) + ";"}
-      onDoubleClick={() =>
-        copy2clipboard(
-          theme.variable + ": " + HSL2ComputedColor(theme.color) + ";"
-        )
-      }
+      title={title}
+      onDoubleClick={() => copy2clipboard(title)}
     >
       <div>
         <div className="relative overflow-hidden rounded border size-6 cursor-pointer shadow-md drop-shadow-md">
           <input
-            onClick={(e) => e.stopPropagation()}
+            className="absolute cursor-pointer inset-1/2 size-[calc(100%+12px)] -translate-x-1/2 -translate-y-1/2 flex-shrink-0 bg-transparent"
             // defaultValue={colord(color).toHex()}
-            value={color}
             type="color"
-            onChange={(e) => (
-              setColor(e.target.value), updateValue(e.target.value)
-            )}
-            className="absolute cursor-pointer inset-1/2 size-[calc(100%+12px)] -translate-x-1/2 -translate-y-1/2 flex-shrink-0 bg-transparent"
+            value={color}
+            onChange={(e) => {
+              const clr = e.target.value;
+              hslColorRef.current = colord(clr).toHsl();
+              setColor(clr);
+              updateValue();
+            }}
+            onClick={(e) => e.stopPropagation()} // disable copy to clipboard
           />
         </div>
         <span className="flex-shrink-0">{theme.title}</span>