feat: darkmode draft version

src/routes/setting/Overview/DarkMode.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Radio from '../../../common/component/styled/Radio';
+import { Theme } from '../../../types/common';
+
+// type Props = {}
+
+const DarkMode = () => {
+    const [theme, setTheme] = useState<Theme>(localStorage.theme || "auto");
+    const { t } = useTranslation("setting");
+    const handleThemeToggle = (v: Theme) => {
+        setTheme(v);
+        localStorage.theme = v;
+        // reset
+        document.documentElement.classList.remove("dark");
+        document.documentElement.classList.remove("light");
+        if (v !== "auto") {
+            document.documentElement.classList.add(v);
+        } else {
+            const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            document.documentElement.classList.add(isDark ? "dark" : 'light');
+
+        }
+    };
+    return (
+        <div className="text-sm">
+            <p className="dark:text-gray-100 font-semibold">{t("overview.theme.title")}</p>
+            <p className="flex justify-between w-full text-gray-400 mb-2">
+                {t("overview.theme.desc")}
+            </p>
+            <Radio
+                options={[t("overview.theme.auto"), t("overview.theme.dark"), t("overview.theme.light")]}
+                values={['auto', 'dark', 'light']}
+                value={theme}
+                onChange={(v) => {
+                    handleThemeToggle(v);
+                }}
+            />
+        </div>
+    );
+};
+
+export default DarkMode;

src/routes/setting/Overview/FrontendURL.tsx

@@ -33,12 +33,11 @@ const Index = () => {
     // if(!fetch)
     return (
         <div className="text-sm">
-            <p className="font-semibold">{t("overview.url.title")}</p>
+            <p className="dark:text-gray-100 font-semibold">{t("overview.url.title")}</p>
             <p className="flex justify-between w-full text-gray-400">
                 {t("overview.url.desc")}
             </p>
             <div className="flex items-center gap-4 mt-2">
-
                 <StyledInput placeholder='frontend url' value={url} onChange={handleChange} />
                 <StyledButton disabled={!url || isLoading} className='' onClick={handleUpdate}> {ct("action.update")}</StyledButton>
             </div>

src/routes/setting/Overview/index.tsx

@@ -7,6 +7,7 @@ import useConfig from "../../../common/hook/useConfig";
 import Server from './server';
 import Language from './Language';
 import FrontendURL from "./FrontendURL";
+// import DarkMode from "./DarkMode";
 import ServerVersionChecker from "../../../common/component/ServerVersionChecker";
 
 export default function Overview() {
@@ -33,7 +34,7 @@ export default function Overview() {
       {isAdmin && (
         <>
           <div className="text-sm">
-            <p className="font-semibold">{t("overview.sign_up.title")}</p>
+            <p className="dark:text-gray-100 font-semibold">{t("overview.sign_up.title")}</p>
             <p className="flex justify-between w-full text-gray-400 mb-2">{t("overview.sign_up.desc")}</p>
             <StyledRadio
               options={[t("overview.sign_up.everyone"), t("overview.sign_up.invite")]}
@@ -45,7 +46,7 @@ export default function Overview() {
             />
           </div>
           <div className="text-sm">
-            <p className="font-semibold">{t("overview.guest_mode.title")}</p>
+            <p className="dark:text-gray-100 font-semibold">{t("overview.guest_mode.title")}</p>
             <p className="flex justify-between w-full text-gray-400 mb-2">
               <span className="txt">
                 {t("overview.guest_mode.desc")}
@@ -66,6 +67,7 @@ export default function Overview() {
         </>
       )}
       <Language />
+      {/* <DarkMode /> */}
     </div>
   );
 }

src/routes/setting/Overview/language.tsx

@@ -11,7 +11,7 @@ const Index = () => {
     };
     return (
         <div className="text-sm">
-            <p className="font-semibold">{t("overview.lang.title")}</p>
+            <p className="dark:text-gray-100 font-semibold">{t("overview.lang.title")}</p>
             <p className="flex justify-between w-full text-gray-400 mb-2">
                 {t("overview.lang.desc")}
             </p>

src/routes/setting/Overview/server.tsx

@@ -72,7 +72,7 @@ const Index = () => {
                 </div>
                 {isAdmin && (
                     <div className="flex flex-col justify-between items-start">
-                        <div className="text-sm text-gray-600">
+                        <div className="text-sm text-gray-600 dark:text-gray-100">
                             {t("overview.upload_desc")}
                         </div>
                     </div>
@@ -80,7 +80,7 @@ const Index = () => {
             </div>
             <div className="flex flex-col items-start gap-6 mb-16">
                 <div className="w-full flex flex-col items-start gap-2">
-                    <Label htmlFor="name">{t("overview.name")}</Label>
+                    <Label className='dark:text-gray-100' htmlFor="name">{t("overview.name")}</Label>
                     <Input
                         disabled={!isAdmin}
                         data-type="name"
@@ -92,7 +92,7 @@ const Index = () => {
                     />
                 </div>
                 <div className="w-full flex flex-col items-start gap-2">
-                    <Label htmlFor="desc">{t("overview.desc")}</Label>
+                    <Label className='dark:text-gray-100' htmlFor="desc">{t("overview.desc")}</Label>
                     <Textarea
                         disabled={!isAdmin}
                         data-type="description"