Updates

components/elements/ColorSchemeSelector.tsx

@@ -1,4 +1,4 @@
-import { DetailedHTMLProps, HTMLAttributes } from "react";
+import React, { DetailedHTMLProps, HTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 import Toggle, { TWUI_TOGGLE_PROPS } from "./Toggle";
 
@@ -8,12 +8,22 @@ export default function ColorSchemeSelector({
 }: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
     toggleProps?: TWUI_TOGGLE_PROPS;
 }) {
+    const [active, setActive] = React.useState(false);
+
+    React.useEffect(() => {
+        if (active) {
+            document.documentElement.className = "dark";
+        } else {
+            document.documentElement.className = "";
+        }
+    }, [active]);
+
     return (
         <div
             {...props}
             className={twMerge("flex flex-row items-center", props.className)}
         >
-            <Toggle {...toggleProps} />
+            <Toggle active={active} setActive={setActive} {...toggleProps} />
         </div>
     );
 }