habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: dark/light theme fixes (#7872)

Browse Source 
* web: fix css for user tree-view

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix unrelated things

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix header button colors

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix missing fallback not showing default slant

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* move global theme-dark css to only use for SSR rendered pages

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L
2023-12-13 17:32:09 +01:00
committed by GitHub
parent 026e80bd10
commit 2337f5a173
6 changed files with 47 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/common/styles/theme-dark.css
View File

@ -310,6 +310,12 @@ select[multiple] option:checked {
--pf-c-wizard__nav-link--before--BackgroundColor: transparent;
}
/* tree view */
.pf-c-tree-view__node {
--pf-c-tree-view__node--Color: var(--ak-dark-foreground);
}
.pf-c-tree-view__node-toggle {
--pf-c-tree-view__node-toggle--Color: var(--ak-dark-foreground);
}
.pf-c-tree-view__node:focus {
--pf-c-tree-view__node--focus--BackgroundColor: var(--ak-dark-background-light-ish);
}

8
web/src/user/UserInterface.ts
View File

@ -82,9 +82,9 @@ export class UserInterface extends Interface {
:host([theme="dark"]) .pf-c-page__header {
color: var(--ak-dark-foreground) !important;
}
.pf-c-page__header-tools-item .fas,
.pf-c-notification-badge__count,
.pf-c-page__header-tools-group .pf-c-button {
:host([theme="light"]) .pf-c-page__header-tools-item .fas,
:host([theme="light"]) .pf-c-notification-badge__count,
:host([theme="light"]) .pf-c-page__header-tools-group .pf-c-button {
color: var(--ak-global--Color--100) !important;
}
.pf-c-page {
@ -183,7 +183,7 @@ export class UserInterface extends Interface {
<ak-enterprise-status interface="user"></ak-enterprise-status>
<div class="pf-c-page">
<div class="background-wrapper" style="${this.uiConfig.theme.background}">
${this.uiConfig.theme.background === ""
${(this.uiConfig.theme.background || "") === ""
? html`<div class="background-default-slant"></div>`
: html``}
</div>