From 0d2adbb75d5b94c701b57fafa7e17ebce5d55503 Mon Sep 17 00:00:00 2001 From: Erik Jan de Wit Date: Mon, 3 Jun 2024 17:53:07 +0200 Subject: [PATCH] add dark theme switch (#29879) * add dark theme switch Signed-off-by: Erik Jan de Wit * matchMedia does not exists on cypress Signed-off-by: Erik Jan de Wit --------- Signed-off-by: Erik Jan de Wit --- js/apps/admin-ui/src/util.ts | 27 +++++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/js/apps/admin-ui/src/util.ts b/js/apps/admin-ui/src/util.ts index 0aabe67187..7213385349 100644 --- a/js/apps/admin-ui/src/util.ts +++ b/js/apps/admin-ui/src/util.ts @@ -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); + } +}