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
This commit is contained in:
千石
2024-10-05 21:26:25 +08:00
committed by GitHub
parent 2417ff84e6
commit 347b25676f
4 changed files with 20 additions and 3 deletions

View File

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

View File

@ -129,6 +129,15 @@ img {
background-attachment: fixed; 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 { .ant-menu-horizontal {
border-bottom: none !important; border-bottom: none !important;
} }

View File

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

View File

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