Dynamic Theming for Perspective Login Screen via session properties
n
nimmi.r.ext@siemens-energy.com
Currently, the Perspective login screen is not project-based, which means dynamic control via session.props.theme is not possible. The login screen inherits static Gateway branding (logo, colors, etc.), and developers have no access to override or apply project-level themes. This limitation prevents the login screen from following runtime theme changes such as night mode, leading to inconsistent user experience across HMI projects. It would be useful if the login screen could inherit project-level or session-based themes to ensure consistent styling across all views.
Log In
D
Dylan Brown
You can sort of do this now. You will have to manually adjust the css code through the style sheet. Try adding this to the stylesheet of the project.
/
This is whats needed to replace the login panel content
/.client-login .brand-side-panel .gradient-background {
background: linear-gradient(20deg, rgba(100, 101, 102, 1) 0%, rgba(70, 152, 202, 1) 40%, rgba(50, 98, 149, 1) 100%) !important;
}
.client-login .brand-side-panel .gradient-background.perspective {
background: linear-gradient(20deg, rgba(100, 101, 102, 1) 0%, rgba(70, 152, 202, 1) 40%, rgba(50, 98, 149, 1) 100%) !important;
}
/
This is how I clear out the text "Log in"
/.login-header span, .login-header.perspective span {
display: none;
}
/
And replace it with new text
/.login-header::after, .login-header.perspective::after{
content: "Company Name" !important;
color: #FFFFFF;
}
/
Here is how I Replace the background for the loading/logging pages
/.terminal-state-page.--standard, .terminal-login-page {
background: linear-gradient(20deg, rgba(100, 101, 102, 1) 0%, rgba(70, 152, 202, 1) 40%, rgba(50, 98, 149, 1) 100%) !important;
}
/
And one again I give the loading section a background because my picture is too dark!
/.client-loading-page .loading-display .multi-stage-wheel {
background: linear-gradient(20deg, rgba(100, 101, 102, 1) 0%, rgba(70, 152, 202, 1) 40%, rgba(50, 98, 149, 1) 100%) !important;
}
.client-login .login-section {
background-image: url("/system/images/MainPage.png") !important;
background-repeat: no-repeat;
background-size: cover;
}