feat(fe/settings): add theme preference

src/client/web/src/client/index.ts

@@ -27,6 +27,7 @@ export interface Preferences {
   cssURL: string;
   lanPackURL: string;
   lan: string;
+  theme: string;
 }
 
 export interface User {

src/client/web/src/client/users_mock.ts

@@ -93,6 +93,7 @@ export const resps = {
         cssURL: "cssURL",
         lanPackURL: "lanPackURL",
         lan: "en_US",
+        theme: "light",
       },
     },
   },

src/client/web/src/components/__test__/pane_login.test.tsx

@@ -97,6 +97,7 @@ describe("Login", () => {
         cssURL: "cssURL",
         lanPackURL: "lanPackURL",
         lan: "en_US",
+        theme: "light",
       },
     });
 

src/client/web/src/components/__test__/state_mgr.test.tsx

@@ -113,6 +113,7 @@ describe("State Manager", () => {
         cssURL: "cssURL",
         lanPackURL: "lanPackURL",
         lan: "en_US",
+        theme: "light",
       },
     });
 
@@ -329,6 +330,7 @@ describe("State Manager", () => {
         cssURL: "",
         lanPackURL: "",
         lan: "en_US",
+        theme: "light",
       },
     });
 

src/client/web/src/components/__test__/topbar.test.tsx

@@ -143,6 +143,7 @@ describe("TopBar", () => {
         cssURL: "",
         lanPackURL: "",
         lan: "en_US",
+        theme: "light",
       },
     });
 

src/client/web/src/components/core_state.ts

@@ -55,7 +55,7 @@ export function newState(): ICoreState {
 }
 
 export function initState(): ICoreState {
-  const defaultLanPackage = MsgPackage.get("en_US")
+  const defaultLanPackage = MsgPackage.get("en_US");
   const filesOrderBy = defaultLanPackage.get("item.name");
   const uploadingsOrderBy = defaultLanPackage.get("item.path");
   const sharingsOrderBy = defaultLanPackage.get("item.path");
@@ -107,6 +107,7 @@ export function initState(): ICoreState {
         cssURL: "",
         lanPackURL: "",
         lan: "en_US",
+        theme: "light",
       },
     },
     msg: {

src/client/web/src/components/pane_settings.tsx

@@ -156,6 +156,19 @@ export class PaneSettings extends React.Component<Props, State, {}> {
     }
   };
 
+  setTheme = async (theme: string) => {
+    updater().setTheme(theme);
+    try {
+      const status = await updater().syncPreferences();
+      if (status !== "") {
+        alertMsg(this.props.msg.pkg.get("update.fail"));
+      }
+    } finally {
+      alertMsg(this.props.msg.pkg.get("update.ok"));
+      this.props.update(updater().updateUI);
+    }
+  };
+
   truncateErrors = () => {
     if (confirmMsg(this.props.msg.pkg.get("op.confirm"))) {
       ErrorLogger().truncate();
@@ -354,6 +367,38 @@ export class PaneSettings extends React.Component<Props, State, {}> {
           </div>
         </Container>
 
+        <Container>
+          <Flexbox
+            children={List([
+              <h5 className="title-m">
+                {this.props.msg.pkg.get("theme")}
+              </h5>,
+            ])}
+            childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+          />
+
+          <div className="hr"></div>
+
+          <div>
+            <button
+              onClick={() => {
+                this.setTheme("light");
+              }}
+              className="button-default inline-block margin-r-m"
+            >
+              {this.props.msg.pkg.get("theme.light")}
+            </button>
+            <button
+              onClick={() => {
+                this.setTheme("dark");
+              }}
+              className="button-default inline-block margin-r-m"
+            >
+              {this.props.msg.pkg.get("theme.dark")}
+            </button>
+          </div>
+        </Container>
+
         {/* disabled */}
         {/* <Container>
           <Flexbox

src/client/web/src/components/root_frame.tsx

@@ -52,8 +52,10 @@ export class RootFrame extends React.Component<Props, State, {}> {
 
   render() {
     const bgStyle = this.makeBgStyle();
-    const themeDark = "theme-dark";
-    const theme = themeDark;
+    const theme =
+      this.props.login.preferences.theme === "light"
+        ? "theme-default"
+        : "theme-dark";
     const fontSizeClass = "font-m";
 
     const displaying = this.props.ui.control.controls.get(controlName);

src/client/web/src/components/state_updater.ts

@@ -622,6 +622,7 @@ export class Updater {
       cssURL: "",
       lanPackURL: "",
       lan: "en_US",
+      theme: "light",
     };
   };
 
@@ -781,6 +782,10 @@ export class Updater {
     }
   };
 
+  setTheme = (theme: string) => {
+    this.props.login.preferences.theme = theme;
+  };
+
   setControlOption = (controlName: string, option: string): boolean => {
     const controlExists = this.props.ui.control.controls.has(controlName);
     const optionsExists = this.props.ui.control.options.has(controlName);

src/client/web/src/i18n/en_US.ts

@@ -138,7 +138,10 @@ export const msgs: Map<string, string> = Map({
   "endpoints.home": "Home",
   "state.stopped": "Stopped",
   "state.error": "Error",
-  "usedSpace": "Used Space",
-  "resetUsedSpace": "Reset Used Space",
-  "confirm.resetUsedSpace": "The operation may take some time, do you confirm?"
+  usedSpace: "Used Space",
+  resetUsedSpace: "Reset Used Space",
+  "confirm.resetUsedSpace": "The operation may take some time, do you confirm?",
+  theme: "Theme",
+  "theme.light": "Light",
+  "theme.dark": "Dark",
 });

src/client/web/src/i18n/zh_CN.ts

@@ -130,12 +130,15 @@ export const msgs: Map<string, string> = Map({
   "op.cancel": "取消",
   "term.time": "时间",
   "breadcrumb.loc": "位置",
-  "endpoints": "端点",
+  endpoints: "端点",
   "endpoints.root": "根",
   "endpoints.home": "家",
   "state.stopped": "已停止",
   "state.error": "错误",
-  "usedSpace": "已用空间",
-  "resetUsedSpace": "重置已用空间",
-  "confirm.resetUsedSpace": "此操作可能会需要一些时间, 确认吗?"
+  usedSpace: "已用空间",
+  resetUsedSpace: "重置已用空间",
+  "confirm.resetUsedSpace": "此操作可能会需要一些时间, 确认吗?",
+  theme: "主题",
+  "theme.light": "光白",
+  "theme.dark": "暗黑",
 });