web: fix dark theme and theme switch (#10667)

* base locale off of ak-element Signed-off-by: Jens Langhammer <jens@goauthentik.io> * revert temp theme fixes Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix theme switching Signed-off-by: Jens Langhammer <jens@goauthentik.io> * add basic support for theme-different images Signed-off-by: Jens Langhammer <jens@goauthentik.io> * sort outposts in card Signed-off-by: Jens Langhammer <jens@goauthentik.io> * set default theme based on pre-hydrated brand settings Signed-off-by: Jens Langhammer <jens@goauthentik.io> * activate global theme before root in shadow dom Signed-off-by: Jens Langhammer <jens@goauthentik.io> * logging Signed-off-by: Jens Langhammer <jens@goauthentik.io> * when using _applyTheme, check media matcher Signed-off-by: Jens Langhammer <jens@goauthentik.io> * add docs Signed-off-by: Jens Langhammer <jens@goauthentik.io> --------- Signed-off-by: Jens Langhammer <jens@goauthentik.io>
2024-07-29 20:00:25 +02:00
parent 2a70b4aae2
commit 7f0c6ddb5b
10 changed files with 53 additions and 18 deletions
--- a/web/src/elements/utils/images.ts
+++ b/web/src/elements/utils/images.ts
@ -0,0 +1,13 @@
+import { QUERY_MEDIA_COLOR_LIGHT, rootInterface } from "@goauthentik/elements/Base";
+
+import { UiThemeEnum } from "@goauthentik/api";
+
+export function themeImage(rawPath: string) {
+    let enabledTheme = rootInterface()?.activeTheme;
+    if (!enabledTheme || enabledTheme === UiThemeEnum.Automatic) {
+        enabledTheme = window.matchMedia(QUERY_MEDIA_COLOR_LIGHT).matches
+            ? UiThemeEnum.Light
+            : UiThemeEnum.Dark;
+    }
+    return rawPath.replace("%(theme)s", enabledTheme);
+}