fix: theme will fully restore after page reload (#2743)

* fix: theme will set to default after flush

* fix: use consume theme to ensure EntryPage will always use default themeAlgorithm

* fix: fix logo render, add try catch to handle
potential err cause by JSON.parse

web/src/App.js

@@ -102,19 +102,24 @@ setTwoToneColor("rgb(87,52,211)");
 class App extends Component {
   constructor(props) {
     super(props);
+    let storageThemeAlgorithm = [];
+    try {
+      storageThemeAlgorithm = localStorage.getItem("themeAlgorithm") ? JSON.parse(localStorage.getItem("themeAlgorithm")) : ["default"];
+    } catch {
+      storageThemeAlgorithm = ["default"];
+    }
     this.state = {
       classes: props,
       selectedMenuKey: 0,
       account: undefined,
       uri: null,
       menuVisible: false,
-      themeAlgorithm: ["default"],
+      themeAlgorithm: storageThemeAlgorithm,
       themeData: Conf.ThemeDefault,
-      logo: this.getLogo(Setting.getAlgorithmNames(Conf.ThemeDefault)),
+      logo: this.getLogo(storageThemeAlgorithm),
       requiredEnableMfa: false,
       isAiAssistantOpen: false,
     };
-
     Setting.initServerUrl();
     Auth.initAuthWithConfig({
       serverUrl: Setting.ServerUrl,
@@ -228,6 +233,19 @@ class App extends Component {
     });
 
     if (initThemeAlgorithm) {
+      if (localStorage.getItem("themeAlgorithm")) {
+        let storageThemeAlgorithm = [];
+        try {
+          storageThemeAlgorithm = JSON.parse(localStorage.getItem("themeAlgorithm"));
+        } catch {
+          storageThemeAlgorithm = ["default"];
+        }
+        this.setState({
+          logo: this.getLogo(storageThemeAlgorithm),
+          themeAlgorithm: storageThemeAlgorithm,
+        });
+        return;
+      }
       this.setState({
         logo: this.getLogo(Setting.getAlgorithmNames(theme)),
         themeAlgorithm: Setting.getAlgorithmNames(theme),
@@ -385,6 +403,7 @@ class App extends Component {
                 themeAlgorithm: nextThemeAlgorithm,
                 logo: this.getLogo(nextThemeAlgorithm),
               });
+              localStorage.setItem("themeAlgorithm", JSON.stringify(nextThemeAlgorithm));
             }} />
           <LanguageSelect languages={this.state.account.organization.languages} />
           <Tooltip title="Click to open AI assitant">
@@ -423,7 +442,7 @@ class App extends Component {
     const textColor = this.state.themeAlgorithm.includes("dark") ? "white" : "black";
     const twoToneColor = this.state.themeData.colorPrimary;
 
-    res.push(Setting.getItem(<Link to="/">{i18next.t("general:Home")}</Link>, "/home", <HomeTwoTone twoToneColor={twoToneColor} />, [
+    res.push(Setting.getItem(<Link style={{color: textColor}} to="/">{i18next.t("general:Home")}</Link>, "/home", <HomeTwoTone twoToneColor={twoToneColor} />, [
       Setting.getItem(<Link to="/">{i18next.t("general:Dashboard")}</Link>, "/"),
       Setting.getItem(<Link to="/shortcuts">{i18next.t("general:Shortcuts")}</Link>, "/shortcuts"),
       Setting.getItem(<Link to="/apps">{i18next.t("general:Apps")}</Link>, "/apps"),
@@ -732,6 +751,10 @@ class App extends Component {
   renderPage() {
     if (this.isDoorPages()) {
       return (
+        <ConfigProvider theme={{
+          algorithm: Setting.getAlgorithm(["default"]),
+        }}>
+          <StyleProvider hashPriority="high" transformers={[legacyLogicalPropertiesTransformer]}>
             <Layout id="parent-area">
               <Content style={{display: "flex", justifyContent: "center"}}>
                 {
@@ -763,6 +786,8 @@ class App extends Component {
                 this.renderAiAssistant()
               }
             </Layout>
+          </StyleProvider>
+        </ConfigProvider>
       );
     }