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

web: fix theming issues when using automatic (#4898)

Browse Source 
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L
2023-03-10 17:33:03 +01:00
committed by GitHub
parent 0ef333f8ea
commit 59e54901fb
7 changed files with 41 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/admin/AdminInterface.ts
View File

@ -70,7 +70,11 @@ export class AdminInterface extends Interface {
display: none;
}
.pf-c-page {
background-color: transparent !important;
background-color: var(--pf-c-page--BackgroundColor) !important;
}
/* Global page background colour */
:host([theme="dark"]) .pf-c-page {
--pf-c-page--BackgroundColor: var(--ak-dark-background);
}
`,
];

1
web/src/common/constants.ts
View File

@ -17,6 +17,7 @@ export const EVENT_FLOW_ADVANCE = "ak-flow-advance";
export const EVENT_LOCALE_CHANGE = "ak-locale-change";
export const EVENT_REQUEST_POST = "ak-request-post";
export const EVENT_MESSAGE = "ak-message";
export const EVENT_THEME_CHANGE = "ak-theme-change";
export const WS_MSG_TYPE_MESSAGE = "message";
export const WS_MSG_TYPE_REFRESH = "refresh";

51
web/src/elements/Base.ts
View File

@ -1,5 +1,4 @@
import { EVENT_LOCALE_CHANGE } from "@goauthentik/common/constants";
import { globalAK } from "@goauthentik/common/global";
import { EVENT_LOCALE_CHANGE, EVENT_THEME_CHANGE } from "@goauthentik/common/constants";
import { uiConfig } from "@goauthentik/common/ui/config";
import { LitElement } from "lit";
@ -68,6 +67,10 @@ export class AKElement extends LitElement {
return root;
}
async getTheme(): Promise<UiThemeEnum> {
return rootInterface()?.getTheme() || UiThemeEnum.Automatic;
}
async _initTheme(root: AdoptedStyleSheetsElement): Promise<void> {
// Early activate theme based on media query to prevent light flash
// when dark is preferred
@ -77,7 +80,7 @@ export class AKElement extends LitElement {
? UiThemeEnum.Light
: UiThemeEnum.Dark,
);
rootInterface()?._initTheme(root);
this._applyTheme(root, await this.getTheme());
}
private async _initCustomCSS(root: ShadowRoot): Promise<void> {
@ -120,33 +123,36 @@ export class AKElement extends LitElement {
this._activateTheme(root, theme);
}
static themeToStylesheet(theme?: UiThemeEnum): CSSStyleSheet | undefined {
if (theme === UiThemeEnum.Dark) {
return ThemeDark;
}
return undefined;
}
_activateTheme(root: AdoptedStyleSheetsElement, theme: UiThemeEnum) {
if (this._activeTheme === theme) {
console.log("activating theme", theme, this._activeTheme, this);
if (theme === this._activeTheme) {
return;
}
// Make sure we only get to this callback once we've picked a concise theme choice
this.dispatchEvent(
new CustomEvent("themeChange", {
new CustomEvent(EVENT_THEME_CHANGE, {
bubbles: true,
composed: true,
detail: theme,
}),
);
this._activeTheme = theme;
this.setAttribute("theme", theme);
let stylesheet: CSSStyleSheet | undefined;
if (theme === UiThemeEnum.Dark) {
stylesheet = ThemeDark;
}
if (!stylesheet) {
return;
}
if (root.adoptedStyleSheets.indexOf(stylesheet) === -1) {
const stylesheet = AKElement.themeToStylesheet(theme);
const oldStylesheet = AKElement.themeToStylesheet(this._activeTheme);
if (stylesheet) {
root.adoptedStyleSheets = [...root.adoptedStyleSheets, stylesheet];
} else {
root.adoptedStyleSheets = root.adoptedStyleSheets.filter((v) => v !== stylesheet);
}
this.requestUpdate();
if (oldStylesheet) {
root.adoptedStyleSheets = root.adoptedStyleSheets.filter((v) => v !== oldStylesheet);
}
this._activeTheme = theme;
}
disconnectedCallback() {
@ -161,13 +167,8 @@ export class Interface extends AKElement {
super._activateTheme(document, theme);
}
async _initTheme(root: AdoptedStyleSheetsElement): Promise<void> {
const bootstrapTheme = globalAK()?.tenant.uiTheme || UiThemeEnum.Automatic;
this._applyTheme(root, bootstrapTheme);
uiConfig().then((config) => {
if (config.theme.base) {
this._applyTheme(root, config.theme.base);
}
});
async getTheme(): Promise<UiThemeEnum> {
const config = await uiConfig();
return config.theme.base;
}
}

3
web/src/elements/CodeMirror.ts
View File

@ -13,6 +13,7 @@ import * as yamlMode from "@codemirror/legacy-modes/mode/yaml";
import { Compartment, EditorState, Extension } from "@codemirror/state";
import { oneDark } from "@codemirror/theme-one-dark";
import { EditorView, drawSelection, keymap, lineNumbers } from "@codemirror/view";
import { EVENT_THEME_CHANGE } from "@goauthentik/common/constants";
import { AKElement } from "@goauthentik/elements/Base";
import YAML from "yaml";
@ -128,7 +129,7 @@ export class CodeMirrorTextarea<T> extends AKElement {
}
firstUpdated(): void {
this.addEventListener("themeChange", ((ev: CustomEvent<UiThemeEnum>) => {
this.addEventListener(EVENT_THEME_CHANGE, ((ev: CustomEvent<UiThemeEnum>) => {
if (ev.detail === UiThemeEnum.Dark) {
this.editor?.dispatch({
effects: this.theme.reconfigure(this.themeDark),

4
web/src/elements/Diagram.ts
View File

@ -1,4 +1,4 @@
import { EVENT_REFRESH } from "@goauthentik/common/constants";
import { EVENT_REFRESH, EVENT_THEME_CHANGE } from "@goauthentik/common/constants";
import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/EmptyState";
import mermaid, { MermaidConfig } from "mermaid";
@ -53,7 +53,7 @@ export class Diagram extends AKElement {
firstUpdated(): void {
if (this.handlerBound) return;
window.addEventListener(EVENT_REFRESH, this.refreshHandler);
this.addEventListener("themeChange", ((ev: CustomEvent<UiThemeEnum>) => {
this.addEventListener(EVENT_THEME_CHANGE, ((ev: CustomEvent<UiThemeEnum>) => {
if (ev.detail === UiThemeEnum.Dark) {
this.config.theme = "dark";
} else {

4
web/src/elements/charts/Chart.ts
View File

@ -1,4 +1,4 @@
import { EVENT_REFRESH } from "@goauthentik/common/constants";
import { EVENT_REFRESH, EVENT_THEME_CHANGE } from "@goauthentik/common/constants";
import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/EmptyState";
import {
@ -93,7 +93,7 @@ export abstract class AKChart<T> extends AKElement {
super.connectedCallback();
window.addEventListener("resize", this.resizeHandler);
this.addEventListener(EVENT_REFRESH, this.refreshHandler);
this.addEventListener("themeChange", ((ev: CustomEvent<UiThemeEnum>) => {
this.addEventListener(EVENT_THEME_CHANGE, ((ev: CustomEvent<UiThemeEnum>) => {
if (ev.detail === UiThemeEnum.Light) {
this.fontColour = FONT_COLOUR_LIGHT_MODE;
} else {

7
web/src/flow/FlowExecutor.ts
View File

@ -8,7 +8,7 @@ import { globalAK } from "@goauthentik/common/global";
import { configureSentry } from "@goauthentik/common/sentry";
import { first } from "@goauthentik/common/utils";
import { WebsocketClient } from "@goauthentik/common/ws";
import { AdoptedStyleSheetsElement, Interface } from "@goauthentik/elements/Base";
import { Interface } from "@goauthentik/elements/Base";
import "@goauthentik/elements/LoadingOverlay";
import "@goauthentik/flow/stages/FlowErrorStage";
import "@goauthentik/flow/stages/RedirectStage";
@ -182,9 +182,8 @@ export class FlowExecutor extends Interface implements StageHost {
tenant().then((tenant) => (this.tenant = tenant));
}
async _initTheme(root: AdoptedStyleSheetsElement): Promise<void> {
const bootstrapTheme = globalAK()?.tenant.uiTheme || UiThemeEnum.Automatic;
this._applyTheme(root, bootstrapTheme);
async getTheme(): Promise<UiThemeEnum> {
return globalAK()?.tenant.uiTheme || UiThemeEnum.Automatic;
}
submit(payload?: FlowChallengeResponseRequest): Promise<boolean> {