TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2024-12-04 23:45:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(login): correctly render logo based on theme mode (#8355)

Browse Source 
# Which Problems Are Solved

The initial load of the login UI with dark mode preference
(prefers-color-scheme: dark) first rendered the logo configured for
light mode. Also switching from dark to light or vice versa would result
in the same behavior.
This was due to a mixed logic of server (based on cookie) and client
(prefers-color-scheme and cookie) deciding which mode to render.

# How the Problems Are Solved

- Since the main logic of which mode to use (`prefers-color-scheme`) can
only be achieve client side, both logos will be served in the HTML and
either will be rendered based on CSS.

# Additional Changes

None

# Additional Context

- closes #2085
This commit is contained in:
Livio Spring 2024-07-25 09:38:36 +02:00 committed by GitHub
parent 693e27b906
commit 3b59b5cb1a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
internal/api/ui/login/static/resources/themes/scss/styles/header/header.scss
View File

@ -18,5 +18,12 @@ $lgn-header-margin: auto;
max-width: 250px;
max-height: 150px;
object-fit: contain;
.lgn-dark-theme &.lgn-logo-light {
display: none;
}
.lgn-light-theme &.lgn-logo-dark {
display: none;
}
}
}

18
internal/api/ui/login/static/templates/header.html
View File

@ -1,17 +1,17 @@
{{define "header"}}
<header class="lgn-header">
{{ if hasCustomPolicy .LabelPolicy }}
{{ $logo := customLogoResource .PrivateLabelingOrgID .LabelPolicy .DarkMode }}
{{if $logo}}
<img class="lgn-logo" src="{{$logo}}" alt="Logo">
{{ $logoDark := customLogoResource .PrivateLabelingOrgID .LabelPolicy true }}
{{ $logoLight := customLogoResource .PrivateLabelingOrgID .LabelPolicy false }}
{{if $logoDark}}
<img class="lgn-logo lgn-logo-dark" src="{{$logoDark}}" alt="Logo">
{{end}}
{{if $logoLight}}
<img class="lgn-logo lgn-logo-light" src="{{$logoLight}}" alt="Logo">
{{end}}
{{ else }}
{{if .DarkMode }}
<img class="lgn-logo" src="{{ resourceThemeUrl "logo-light.svg" .Theme }}" alt="Logo">
{{else}}
<img class="lgn-logo" src="{{ resourceThemeUrl "logo-dark.svg" .Theme }}" alt="Logo">
{{end}}
<img class="lgn-logo lgn-logo-dark" src="{{ resourceThemeUrl "logo-light.svg" .Theme }}" alt="Logo">
<img class="lgn-logo lgn-logo-light" src="{{ resourceThemeUrl "logo-dark.svg" .Theme }}" alt="Logo">
{{end}}
</header>
{{end}}