libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases 1 Packages Activity Actions

add dark theme switch (#29879)

Browse source 
* add dark theme switch

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

* matchMedia does not exists on cypress

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

---------

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
Erik Jan de Wit 2024-06-03 17:53:07 +02:00 committed by GitHub
parent a650d99b2f
commit 0d2adbb75d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 23 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
js/apps/admin-ui/src/util.ts
View file

@ -1,10 +1,10 @@
import { saveAs } from "file-saver";
import { cloneDeep } from "lodash-es";
import { FieldValues, Path, PathValue, UseFormSetValue } from "react-hook-form";
import { flatten } from "flat";
import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
import type { ProviderRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/serverInfoRepesentation";
import type { IFormatter, IFormatterValueType } from "@patternfly/react-table";
import { saveAs } from "file-saver";
import { flatten } from "flat";
import { cloneDeep } from "lodash-es";
import { FieldValues, Path, PathValue, UseFormSetValue } from "react-hook-form";
import {
arrayToKeyValue,
@ -181,3 +181,22 @@ export const localeToDisplayName = (locale: string, displayLocale: string) => {
return locale;
}
};
const DARK_MODE_CLASS = "pf-v5-theme-dark";
const mediaQuery =
window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)");
updateDarkMode(mediaQuery?.matches);
mediaQuery?.addEventListener("change", (event: MediaQueryListEvent) =>
updateDarkMode(event.matches),
);
function updateDarkMode(isEnabled: boolean = false) {
const { classList } = document.documentElement;
if (isEnabled) {
classList.add(DARK_MODE_CLASS);
} else {
classList.remove(DARK_MODE_CLASS);
}
}