From e56f5c504477eccd53a82c59aef762d34b6fd5f0 Mon Sep 17 00:00:00 2001 From: =?utf8?q?J=C3=A9r=C3=B4me=20Benoit?= Date: Thu, 30 Apr 2026 15:59:03 +0200 Subject: [PATCH] refactor(ui-web): derive color-scheme from CSS instead of duplicated map Read the color-scheme property from the resolved theme CSS rather than maintaining a manual THEME_COLOR_SCHEME record. New themes only need to declare color-scheme in their CSS file without updating TypeScript code. --- ui/web/src/shared/composables/useTheme.ts | 26 ++++++++++------------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/ui/web/src/shared/composables/useTheme.ts b/ui/web/src/shared/composables/useTheme.ts index e460ac8a..91de2fd6 100644 --- a/ui/web/src/shared/composables/useTheme.ts +++ b/ui/web/src/shared/composables/useTheme.ts @@ -8,17 +8,6 @@ export const AVAILABLE_THEMES = THEME_IDS export const DEFAULT_THEME: ThemeName = 'tokyo-night-storm' export const THEME_STORAGE_KEY = 'ecs-ui-theme' -const THEME_COLOR_SCHEME: Record = { - 'catppuccin-latte': 'light', - dracula: 'dark', - 'gruvbox-dark': 'dark', - 'rose-pine': 'dark', - 'sap-horizon': 'light', - 'teal-dark': 'dark', - 'teal-light': 'light', - 'tokyo-night-storm': 'dark', -} - export type ThemeName = (typeof THEME_IDS)[number] /** @@ -41,21 +30,28 @@ const lastError: Ref = ref(null) /** * Applies a theme by setting data-theme and data-color-scheme attributes on the document root. - * Disables CSS transitions during the swap to prevent color flash (VueUse pattern). * @param themeName - The theme name to apply */ function applyTheme (themeName: ThemeName): void { if (typeof document === 'undefined') return - // Disable CSS transitions during theme swap to prevent color flash (VueUse pattern). document.documentElement.classList.add('theme-switching') document.documentElement.setAttribute('data-theme', themeName) - document.documentElement.setAttribute('data-color-scheme', THEME_COLOR_SCHEME[themeName]) - // Force reflow so browsers apply the transition-disable before restoring transitions. + // Force reflow so the theme CSS is resolved before reading color-scheme. // eslint-disable-next-line no-void void document.documentElement.offsetHeight + document.documentElement.setAttribute('data-color-scheme', resolveColorScheme()) document.documentElement.classList.remove('theme-switching') } +/** + * Reads the resolved color-scheme from the CSS after theme application. + * @returns The color scheme value from the applied theme CSS + */ +function resolveColorScheme (): string { + const value = getComputedStyle(document.documentElement).getPropertyValue('color-scheme').trim() + return value === 'light' ? 'light' : 'dark' +} + applyTheme(activeThemeId.value) /** -- 2.43.0