fix(ui-web): future-proof light-mode pill overrides and fix import ordering

diff --git a/ui/web/src/core/index.ts b/ui/web/src/core/index.ts
index 231af0bfa0f26d51d951341feec484bdc27ba165..6fcd13535d83e35f884391d94f6b7dfac9ea5aa5 100644 (file)
--- a/ui/web/src/core/index.ts
+++ b/ui/web/src/core/index.ts
@@ -23,6 +23,7 @@ export {
   useUIClient,
 } from './providers.js'
 export {
+  deleteFromLocalStorage,
   deleteLocalStorageByKeyPattern,
   getFromLocalStorage,
   getLocalStorage,

diff --git a/ui/web/src/shared/composables/useTheme.ts b/ui/web/src/shared/composables/useTheme.ts
index 9f399956824668401582b3325199c69c6a6d7583..e460ac8afa03ff2e558930ad16cb789e4583ca43 100644 (file)
--- a/ui/web/src/shared/composables/useTheme.ts
+++ b/ui/web/src/shared/composables/useTheme.ts
@@ -8,6 +8,17 @@ 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<ThemeName, 'dark' | 'light'> = {
+  '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]
 
 /**
@@ -29,9 +40,8 @@ const activeThemeId: Ref<ThemeName> = ref(
 const lastError: Ref<null | string> = ref(null)
 
 /**
- * Applies a theme by setting the data-theme attribute on the document root.
+ * 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).
- * The color-scheme is handled by CSS [data-theme] declarations.
  * @param themeName - The theme name to apply
  */
 function applyTheme (themeName: ThemeName): void {
@@ -39,6 +49,7 @@ function applyTheme (themeName: ThemeName): void {
   // 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.
   // eslint-disable-next-line no-void
   void document.documentElement.offsetHeight

diff --git a/ui/web/src/skins/modern/ModernLayout.vue b/ui/web/src/skins/modern/ModernLayout.vue
index 0fce3967837814b89994d1c08a5878c1ddca4140..76ef9a7d4a0928a31a70b5c287133ab0e95ff97d 100644 (file)
--- a/ui/web/src/skins/modern/ModernLayout.vue
+++ b/ui/web/src/skins/modern/ModernLayout.vue
@@ -92,6 +92,8 @@ import { useLayoutData } from '@/shared/composables/useLayoutData.js'
 import { useSimulatorControl } from '@/shared/composables/useSimulatorControl.js'
 
 import ConfirmDialog from './components/ConfirmDialog.vue'
+import SimulatorBar from './components/SimulatorBar.vue'
+import StationCard from './components/StationCard.vue'
 
 /**
  * Creates a lazy-loaded dialog component with shared loading/error boundaries.
@@ -118,8 +120,6 @@ const SetSupervisionUrlDialog = defineAsyncDialog(
 const StartTransactionDialog = defineAsyncDialog(
   () => import('./components/dialogs/StartTransactionDialog.vue')
 )
-import SimulatorBar from './components/SimulatorBar.vue'
-import StationCard from './components/StationCard.vue'
 
 const $chargingStations = useChargingStations()
 

diff --git a/ui/web/src/skins/modern/modern.css b/ui/web/src/skins/modern/modern.css
index a869cda304aca33cc1bf61ebb5472ca70654d162..7fa6eb6f700d729d9b46ca376f7b54b17b56b3de 100644 (file)
--- a/ui/web/src/skins/modern/modern.css
+++ b/ui/web/src/skins/modern/modern.css
@@ -855,25 +855,19 @@ html[data-skin='modern'] #app {
 
 /* Light-theme pill overrides — state colours are already dark (Material 700)
  * and readable on light backgrounds without white mixing. */
-:root[data-theme='catppuccin-latte'] .modern-pill--ok,
-:root[data-theme='sap-horizon'] .modern-pill--ok,
-:root[data-theme='teal-light'] .modern-pill--ok {
+:root[data-color-scheme='light'] .modern-pill--ok {
   color: var(--color-state-ok);
   background-color: color-mix(in srgb, var(--color-state-ok) 14%, transparent);
   border-color: color-mix(in srgb, var(--color-state-ok) 35%, transparent);
 }
 
-:root[data-theme='catppuccin-latte'] .modern-pill--warn,
-:root[data-theme='sap-horizon'] .modern-pill--warn,
-:root[data-theme='teal-light'] .modern-pill--warn {
+:root[data-color-scheme='light'] .modern-pill--warn {
   color: var(--color-state-warn);
   background-color: color-mix(in srgb, var(--color-state-warn) 18%, transparent);
   border-color: color-mix(in srgb, var(--color-state-warn) 50%, transparent);
 }
 
-:root[data-theme='catppuccin-latte'] .modern-pill--err,
-:root[data-theme='sap-horizon'] .modern-pill--err,
-:root[data-theme='teal-light'] .modern-pill--err {
+:root[data-color-scheme='light'] .modern-pill--err {
   color: var(--color-state-err);
   background-color: color-mix(in srgb, var(--color-state-err) 14%, transparent);
   border-color: color-mix(in srgb, var(--color-state-err) 35%, transparent);

diff --git a/ui/web/tests/unit/Utils.test.ts b/ui/web/tests/unit/Utils.test.ts
index d71492710a9efa2e26b30f1e1079e0fde7cbb028..d334cbca5c7fd91bd1af5f602edbd3dd26c30f87 100644 (file)
--- a/ui/web/tests/unit/Utils.test.ts
+++ b/ui/web/tests/unit/Utils.test.ts
@@ -7,6 +7,7 @@ import { ResponseStatus } from 'ui-common'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 
 import {
+  deleteFromLocalStorage,
   getFromLocalStorage,
   getLocalStorage,
   resetToggleButtonState,
@@ -15,7 +16,6 @@ import {
   useConfiguration,
   useTemplates,
 } from '@/core/index.js'
-import { deleteFromLocalStorage } from '@/core/storage.js'
 import { useFetchData } from '@/shared/composables/useFetchData.js'
 
 import { toastMock } from '../setup.js'