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

web: disable reading dark mode out of the UI by default (#10256)

Browse Source 
* web: fix esbuild issue with style sheets

Getting ESBuild, Lit, and Storybook to all agree on how to read and parse stylesheets is a serious
pain. This fix better identifies the value types (instances) being passed from various sources in
the repo to the three *different* kinds of style processors we're using (the native one, the
polyfill one, and whatever the heck Storybook does internally).

Falling back to using older CSS instantiating techniques one era at a time seems to do the trick.
It's ugly, but in the face of the aggressive styling we use to avoid Flashes of Unstyled Content
(FLoUC), it's the logic with which we're left.

In standard mode, the following warning appears on the console when running a Flow:

```
Autofocus processing was blocked because a document already has a focused element.
```

In compatibility mode, the following **error** appears on the console when running a Flow:

```
crawler-inject.js:1106 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
    at initDomMutationObservers (crawler-inject.js:1106:18)
    at crawler-inject.js:1114:24
    at Array.forEach (<anonymous>)
    at initDomMutationObservers (crawler-inject.js:1114:10)
    at crawler-inject.js:1549:1
initDomMutationObservers @ crawler-inject.js:1106
(anonymous) @ crawler-inject.js:1114
initDomMutationObservers @ crawler-inject.js:1114
(anonymous) @ crawler-inject.js:1549
```

Despite this error, nothing seems to be broken and flows work as anticipated.

* web: disable reading dark mode out of the UI by default

This patch disables "dark mode" as a browser preference.  It still honors
the user preference, but it will always default to Light mode and will not
pay attention to the browser setting.

Thank GNU that dark mode availablity is not a requirement to sell to
governments: https://www.section508.gov/content/guide-accessible-web-design-development/#

* Prettier had opinions.

* Prettier having more opinions.

* Preserve knowledge.

* Updated eslint to stop warning us out about deprecated features.
This commit is contained in:
Ken Sternberg
2024-06-26 10:55:00 -07:00
committed by GitHub
parent 778bd9ba63
commit 0caa8cf0fa
3 changed files with 68 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -77,7 +77,8 @@ export class AKElement extends LitElement {
}
async getTheme(): Promise<UiThemeEnum> {
return rootInterface()?.getTheme() || UiThemeEnum.Automatic;
// return rootInterface()?.getTheme() || UiThemeEnum.Automatic;
return rootInterface()?.getTheme() || UiThemeEnum.Light;
}
fixElementStyles() {
@ -90,12 +91,9 @@ export class AKElement extends LitElement {
async _initTheme(root: DocumentOrShadowRoot): Promise<void> {
// Early activate theme based on media query to prevent light flash
// when dark is preferred
this._activateTheme(
root,
window.matchMedia(QUERY_MEDIA_COLOR_LIGHT).matches
? UiThemeEnum.Light
: UiThemeEnum.Dark,
);
// const pref = window.matchMedia(QUERY_MEDIA_COLOR_LIGHT).matches ? UiThemeEnum.Light : UiThemeEnum.Dark;
// this._activateTheme(root, pref);
this._activateTheme(root, UiThemeEnum.Light);
this._applyTheme(root, await this.getTheme());
}