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,37 +751,43 @@ class App extends Component {
   renderPage() {
     if (this.isDoorPages()) {
       return (
-        <Layout id="parent-area">
+        <ConfigProvider theme={{
-          <Content style={{display: "flex", justifyContent: "center"}}>
+          algorithm: Setting.getAlgorithm(["default"]),
-            {
+        }}>
-              this.isEntryPages() ?
+          <StyleProvider hashPriority="high" transformers={[legacyLogicalPropertiesTransformer]}>
-                <EntryPage
+            <Layout id="parent-area">
-                  account={this.state.account}
+              <Content style={{display: "flex", justifyContent: "center"}}>
-                  theme={this.state.themeData}
+                {
-                  onLoginSuccess={(redirectUrl) => {
+                  this.isEntryPages() ?
-                    if (redirectUrl) {
+                    <EntryPage
-                      localStorage.setItem("mfaRedirectUrl", redirectUrl);
+                      account={this.state.account}
-                    }
+                      theme={this.state.themeData}
-                    this.getAccount();
+                      onLoginSuccess={(redirectUrl) => {
-                  }}
+                        if (redirectUrl) {
-                  onUpdateAccount={(account) => this.onUpdateAccount(account)}
+                          localStorage.setItem("mfaRedirectUrl", redirectUrl);
-                  updataThemeData={this.setTheme}
+                        }
-                /> :
+                        this.getAccount();
-                <Switch>
+                      }}
-                  <Route exact path="/callback" component={AuthCallback} />
+                      onUpdateAccount={(account) => this.onUpdateAccount(account)}
-                  <Route exact path="/callback/saml" component={SamlCallback} />
+                      updataThemeData={this.setTheme}
-                  <Route path="" render={() => <Result status="404" title="404 NOT FOUND" subTitle={i18next.t("general:Sorry, the page you visited does not exist.")}
+                    /> :
-                    extra={<a href="/"><Button type="primary">{i18next.t("general:Back Home")}</Button></a>} />} />
+                    <Switch>
-                </Switch>
+                      <Route exact path="/callback" component={AuthCallback} />
-            }
+                      <Route exact path="/callback/saml" component={SamlCallback} />
-          </Content>
+                      <Route path="" render={() => <Result status="404" title="404 NOT FOUND" subTitle={i18next.t("general:Sorry, the page you visited does not exist.")}
-          {
+                        extra={<a href="/"><Button type="primary">{i18next.t("general:Back Home")}</Button></a>} />} />
-            this.renderFooter()
+                    </Switch>
-          }
+                }
-          {
+              </Content>
-            this.renderAiAssistant()
+              {
-          }
+                this.renderFooter()
-        </Layout>
+              }
+              {
+                this.renderAiAssistant()
+              }
+            </Layout>
+          </StyleProvider>
+        </ConfigProvider>
       );
     }