feat: dark mode now works for login/signup pages too (#3252)

* fix: trying to fix dark mode not applying on login/registration interface

* fix: trying to fix dark mode not applying on login/registration interface

* fix: trying to fix dark mode not applying on login/registration interface

* fix: Clean up unused code

* fix: loginBackgroundDark move to App.less

* fix: fix typo

web/src/App.js

@@ -362,7 +362,11 @@ class App extends Component {
     if (this.isDoorPages()) {
       return (
         <ConfigProvider theme={{
-          algorithm: Setting.getAlgorithm(["default"]),
+          token: {
+            colorPrimary: this.state.themeData.colorPrimary,
+            borderRadius: this.state.themeData.borderRadius,
+          },
+          algorithm: Setting.getAlgorithm(this.state.themeAlgorithm),
         }}>
           <StyleProvider hashPriority="high" transformers={[legacyLogicalPropertiesTransformer]}>
             <Layout id="parent-area">
@@ -372,6 +376,7 @@ class App extends Component {
                     <EntryPage
                       account={this.state.account}
                       theme={this.state.themeData}
+                      themeAlgorithm={this.state.themeAlgorithm}
                       updateApplication={(application) => {
                         this.setState({
                           application: application,
@@ -446,7 +451,6 @@ class App extends Component {
                 setLogoutState={() => {
                   this.setState({
                     account: null,
-                    themeAlgorithm: ["default"],
                   });
                 }}
               />

web/src/App.less

@@ -129,6 +129,15 @@ img {
   background-attachment: fixed;
 }
 
+.loginBackgroundDark {
+  flex: auto;
+  display: flex;
+  align-items: center;
+  background: #000 no-repeat;
+  background-size: 100% 100%;
+  background-attachment: fixed;
+}
+
 .ant-menu-horizontal {
   border-bottom: none !important;
 }

web/src/ApplicationEditPage.js

@@ -977,6 +977,7 @@ class ApplicationEditPage extends React.Component {
                 <SigninTable
                   title={i18next.t("application:Signin items")}
                   table={this.state.application.signinItems}
+                  themeAlgorithm={this.state.themeAlgorithm}
                   onUpdateTable={(value) => {
                     this.updateApplicationField("signinItems", value);
                   }}

web/src/EntryPage.js

@@ -94,10 +94,12 @@ class EntryPage extends React.Component {
         });
     };
 
+    const isDarkMode = this.props.themeAlgorithm.includes("dark");
+
     return (
       <React.Fragment>
         <CustomHead headerHtml={this.state.application?.headerHtml} />
-        <div className="loginBackground"
+        <div className={`${isDarkMode ? "loginBackgroundDark" : "loginBackground"}`}
           style={{backgroundImage: Setting.inIframe() || Setting.isMobile() ? null : `url(${this.state.application?.formBackgroundUrl})`}}>
           <Spin size="large" spinning={this.state.application === undefined && this.state.pricing === undefined} tip={i18next.t("login:Loading")}
             style={{margin: "0 auto"}} />
@@ -124,6 +126,7 @@ class EntryPage extends React.Component {
             <Route exact path="/captcha" render={(props) => <CaptchaPage {...props} />} />
           </Switch>
         </div>
+
       </React.Fragment>
     );
   }