Added back the theme toggler

rohit20v · Jan 1, 2025 · 852fb14 · 852fb14
1 parent 12ae6fd
commit 852fb14
Showing 1 changed file with 11 additions and 15 deletions.
diff --git a/src/components/ToolPickerContainer.tsx b/src/components/ToolPickerContainer.tsx
@@ -10,6 +10,8 @@ import {useColorPicker} from "../hooks/useColorPicker.ts";
 import {ColorPickerTool} from "./ColorPickerTool.tsx";
 import {Stage} from "konva/lib/Stage";
 import {RiDeleteBin2Fill} from "react-icons/ri";
+import {ThemeToggler} from "./ThemeToggler.tsx";
+import {useTheme} from "../hooks/useTheme.ts";
 
 const ToolPickerContainer = ({tool, setTool, stageRef, setSelectedColor, setStrokeWidth, setShapes}: {
     tool: string,
@@ -21,13 +23,12 @@ const ToolPickerContainer = ({tool, setTool, stageRef, setSelectedColor, setStro
 }) => {
 
     const {selectedColor, isPickerVisible, togglePicker, handleColorChange} = useColorPicker();
-    // const {theme, setTheme} = useTheme();
+    const {theme, setTheme} = useTheme();
     const [strokeSize, setStrokeSize] = useState<number>(2)
 
-    // todo fix theme toggling
-    // const toggleTheme = () => {
-    //     setTheme(theme === 'dark' ? 'light' : 'dark');
-    // };
+    const toggleTheme = () => {
+        setTheme(theme === 'dark' ? 'light' : 'dark');
+    };
 
     useEffect(() => {
         setSelectedColor(selectedColor)
@@ -76,17 +77,12 @@ const ToolPickerContainer = ({tool, setTool, stageRef, setSelectedColor, setStro
                                      onToggle={togglePicker}/>
                     <input type="range" min={0} max={24} value={strokeSize}
                            onChange={(event) => setStrokeSize(Number(event.target.value))}/>
+                    <Tool isSelected={false}>
+                        <RiDeleteBin2Fill color={"black"} size={22} onClick={setShapes}/>
+                    </Tool>
+
+                    <ThemeToggler onClick={toggleTheme} theme={theme}/>
 
-                    {/*<ThemeToggler onClick={toggleTheme} theme={theme}/>*/}
-                    <div
-                        style={{
-                            boxShadow: "0 4px 16px 0 gray",
-                            borderRadius: "8px"
-                        }}>
-                        <Tool isSelected={false}>
-                            <RiDeleteBin2Fill color={"black"} size={22} onClick={setShapes}/>
-                        </Tool>
-                    </div>
                 </div>
             </div>
         </>