feat: support follow system appearance (#670)

api/user_setting.go

@@ -35,7 +35,7 @@ func (key UserSettingKey) String() string {
 
 var (
 	UserSettingLocaleValue                 = []string{"en", "zh", "vi", "fr", "sv"}
-	UserSettingAppearanceValue             = []string{"light", "dark"}
+	UserSettingAppearanceValue             = []string{"system", "light", "dark"}
 	UserSettingMemoVisibilityValue         = []Visibility{Private, Protected, Public}
 	UserSettingMemoDisplayTsOptionKeyValue = []string{"created_ts", "updated_ts"}
 )

web/src/App.tsx

@@ -1,17 +1,18 @@
+import { useColorScheme } from "@mui/joy";
 import { useEffect, Suspense } from "react";
 import { useTranslation } from "react-i18next";
 import { RouterProvider } from "react-router-dom";
-import { locationService } from "./services";
+import { globalService, locationService } from "./services";
 import { useAppSelector } from "./store";
 import Loading from "./pages/Loading";
 import router from "./router";
 import * as storage from "./helpers/storage";
-import { useColorScheme } from "@mui/joy";
+import { getSystemColorScheme } from "./helpers/utils";
 
 function App() {
   const { i18n } = useTranslation();
   const { appearance, locale, systemStatus } = useAppSelector((state) => state.global);
-  const { setMode } = useColorScheme();
+  const { mode, setMode } = useColorScheme();
 
   useEffect(() => {
     locationService.updateStateWithLocation();
@@ -20,6 +21,15 @@ function App() {
     };
   }, []);
 
+  useEffect(() => {
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
+      if (globalService.getState().appearance === "system") {
+        const mode = e.matches ? "dark" : "light";
+        setMode(mode);
+      }
+    });
+  }, []);
+
   // Inject additional style and script codes.
   useEffect(() => {
     if (systemStatus.additionalStyle) {
@@ -43,18 +53,27 @@ function App() {
   }, [locale]);
 
   useEffect(() => {
-    const root = document.documentElement;
-    if (appearance === "light") {
-      root.classList.remove("dark");
-    } else if (appearance === "dark") {
-      root.classList.add("dark");
-    }
-    setMode(appearance);
     storage.set({
       appearance: appearance,
     });
+
+    let currentAppearance = appearance;
+    if (appearance === "system") {
+      currentAppearance = getSystemColorScheme();
+    }
+
+    setMode(currentAppearance);
   }, [appearance]);
 
+  useEffect(() => {
+    const root = document.documentElement;
+    if (mode === "light") {
+      root.classList.remove("dark");
+    } else {
+      root.classList.add("dark");
+    }
+  }, [mode]);
+
   return (
     <Suspense fallback={<Loading />}>
       <RouterProvider router={router} />

web/src/components/AppearanceSelect.tsx

@@ -4,7 +4,7 @@ import { globalService, userService } from "../services";
 import { useAppSelector } from "../store";
 import Icon from "./Icon";
 
-const appearanceList = ["light", "dark"];
+const appearanceList = ["system", "light", "dark"];
 
 const AppearanceSelect = () => {
   const user = useAppSelector((state) => state.user.user);
@@ -17,6 +17,8 @@ const AppearanceSelect = () => {
       return <Icon.Sun className={className} />;
     } else if (apperance === "dark") {
       return <Icon.Moon className={className} />;
+    } else {
+      return <Icon.Smile className={className} />;
     }
   };
 

web/src/locales/en.json

@@ -168,9 +168,9 @@
       "additional-script-placeholder": "Additional JavaScript codes"
     },
     "apperance-option": {
+      "system": "Follow system",
       "light": "Always light",
-      "dark": "Always dark",
+      "dark": "Always dark"
-      "system": "Follow system"
     }
   },
   "amount-text": {

web/src/locales/sv.json

@@ -168,9 +168,9 @@
       "additional-script-placeholder": "Ytterligare JavaScript kod"
     },
     "apperance-option": {
+      "system": "Follow system",
       "light": "Alltid ljus",
-      "dark": "Alltid mörk",
+      "dark": "Alltid mörk"
-      "system": "Följ systeminställningarna"
     }
   },
   "amount-text": {
@@ -210,4 +210,4 @@
     "not-allow-space": "Tillåt inte mellanslag",
     "not-allow-chinese": "Tillåt inte kinesiska"
   }
-}
+}

web/src/locales/zh.json

@@ -168,9 +168,9 @@
       "additional-script-placeholder": "自定义 JavaScript 代码"
     },
     "apperance-option": {
+      "system": "跟随系统",
       "light": "总是浅色",
-      "dark": "总是深色",
+      "dark": "总是深色"
-      "system": "跟随系统"
     }
   },
   "amount-text": {

web/src/services/globalService.ts

@@ -11,7 +11,7 @@ const globalService = {
   initialState: async () => {
     const defaultGlobalState = {
       locale: "en" as Locale,
-      appearance: "light" as Appearance,
+      appearance: "system" as Appearance,
       systemStatus: {
         allowSignUp: false,
         additionalStyle: "",

web/src/store/modules/global.ts

@@ -10,7 +10,7 @@ const globalSlice = createSlice({
   name: "global",
   initialState: {
     locale: "en",
-    appearance: "light",
+    appearance: "system",
     systemStatus: {
       host: undefined,
       profile: {

web/src/types/modules/setting.d.ts

@@ -1,4 +1,4 @@
-type Appearance = "light" | "dark";
+type Appearance = "system" | "light" | "dark";
 
 interface Setting {
   locale: Locale;