feat: add color theme selector

frontend/web/src/components/setting/PreferenceSection.tsx

@@ -1,6 +1,6 @@
 import { Option, Select } from "@mui/joy";
 import { useTranslation } from "react-i18next";
-import { UserSetting, UserSetting_Locale } from "@/types/proto/api/v2/user_setting_service_pb";
+import { UserSetting, UserSetting_ColorTheme, UserSetting_Locale } from "@/types/proto/api/v2/user_setting_service_pb";
 import useUserStore from "../../stores/v1/user";
 
 const PreferenceSection: React.FC = () => {
@@ -8,6 +8,7 @@ const PreferenceSection: React.FC = () => {
   const userStore = useUserStore();
   const userSetting = userStore.getCurrentUserSetting();
   const language = userSetting.locale || UserSetting_Locale.EN;
+  const colorTheme = userSetting.colorTheme;
 
   const languageOptions = [
     {
@@ -20,6 +21,21 @@ const PreferenceSection: React.FC = () => {
     },
   ];
 
+  const colorThemeOptions = [
+    {
+      value: "COLOR_THEME_UNSPECIFIED",
+      label: "Auto",
+    },
+    {
+      value: "COLOR_THEME_LIGHT",
+      label: "Light",
+    },
+    {
+      value: "COLOR_THEME_DARK",
+      label: "Dark",
+    },
+  ];
+
   const handleSelectLanguage = async (locale: UserSetting_Locale) => {
     if (!locale) {
       return;
@@ -34,6 +50,16 @@ const PreferenceSection: React.FC = () => {
     );
   };
 
+  const handleSelectColorTheme = async (colorTheme: UserSetting_ColorTheme) => {
+    await userStore.updateUserSetting(
+      {
+        ...userSetting,
+        colorTheme: colorTheme,
+      } as UserSetting,
+      ["color_theme"]
+    );
+  };
+
   return (
     <>
       <div className="w-full flex flex-col justify-start items-start gap-y-2">
@@ -50,6 +76,18 @@ const PreferenceSection: React.FC = () => {
             })}
           </Select>
         </div>
+        <div className="w-full flex flex-row justify-between items-center">
+          <span>Color Theme</span>
+          <Select defaultValue={colorTheme} onChange={(_, value) => handleSelectColorTheme(value as UserSetting_ColorTheme)}>
+            {colorThemeOptions.map((option) => {
+              return (
+                <Option key={option.value} value={option.value}>
+                  {option.label}
+                </Option>
+              );
+            })}
+          </Select>
+        </div>
       </div>
     </>
   );