Updates

components/elements/ColorSchemeSelector.tsx

@@ -1,29 +1,101 @@
 import React, { DetailedHTMLProps, HTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
-import Toggle, { TWUI_TOGGLE_PROPS } from "./Toggle";
+import { Moon, Sun } from "lucide-react";
 
+type Props = DetailedHTMLProps<
+    HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+> & {
+    active?: boolean;
+    setActive?: React.Dispatch<React.SetStateAction<boolean>>;
+    iconWrapperProps?: DetailedHTMLProps<
+        HTMLAttributes<HTMLDivElement>,
+        HTMLDivElement
+    >;
+    defaultScheme?: "light" | "dark";
+};
+
+/**
+ * # Color Scheme Loader
+ * @className_wrapper twui-color-scheme-selector
+ */
 export default function ColorSchemeSelector({
-    toggleProps,
+    active: initialActive,
+    setActive: externalSetActive,
+    iconWrapperProps,
+    defaultScheme,
     ...props
-}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
-    toggleProps?: TWUI_TOGGLE_PROPS;
-}) {
-    const [active, setActive] = React.useState(false);
+}: Props) {
+    const [active, setActive] = React.useState(initialActive);
 
     React.useEffect(() => {
+        const isDocumentDark =
+            document.documentElement.classList.contains("dark");
+        const isDocumentLight =
+            document.documentElement.classList.contains("light");
+
+        if (isDocumentDark) {
+            setActive(true);
+            return;
+        } else if (isDocumentLight) {
+            setActive(false);
+            return;
+        }
+
+        const existingTheme = localStorage.getItem("theme");
+
+        if (existingTheme === "dark") {
+            setActive(true);
+        } else if (existingTheme === "light") {
+            setActive(false);
+        } else if (defaultScheme) {
+            setActive(defaultScheme == "dark" ? false : true);
+        } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+            setActive(true);
+        } else if (typeof active == "undefined") {
+            setActive(false);
+        }
+    }, []);
+
+    React.useEffect(() => {
+        if (typeof active == "undefined") return;
+
         if (active) {
             document.documentElement.className = "dark";
+            localStorage.setItem("theme", "dark");
         } else {
-            document.documentElement.className = "";
+            document.documentElement.className = "light";
+            localStorage.setItem("theme", "light");
         }
     }, [active]);
 
     return (
         <div
             {...props}
-            className={twMerge("flex flex-row items-center", props.className)}
+            className={twMerge(
+                "flex flex-row items-center",
+                "twui-color-scheme-selector",
+                props.className
+            )}
         >
-            <Toggle active={active} setActive={setActive} {...toggleProps} />
+            <button
+                title="Color Scheme Selector Button"
+                onClick={() => setActive(!active)}
+                className={twMerge(
+                    "cursor-pointer hover:opacity-70 flex items-center justify-center"
+                )}
+            >
+                <div
+                    {...iconWrapperProps}
+                    className={twMerge(
+                        "w-6 h-6 flex items-center justify-center",
+                        iconWrapperProps?.className
+                    )}
+                >
+                    {active == false && <Sun />}
+                    {active == true && <Moon />}
+                </div>
+            </button>
         </div>
     );
 }