From 9e90933044fa4dc28d51efb4701a2fc90290db91 Mon Sep 17 00:00:00 2001
From: =?utf8?q?J=C3=A9r=C3=B4me=20Benoit?= <jerome.benoit@sap.com>
Date: Thu, 19 Mar 2026 00:23:29 +0100
Subject: [PATCH] feat(ui): add configurable theme support

Add theme field to ConfigurationData. Theme CSS files are loaded
dynamically from assets/themes/ at startup. Falls back to
tokyo-night-storm when not configured or theme not found.

Move theme.css to assets/themes/tokyo-night-storm.css.
---
 ui/web/src/assets/config-template.json         |  1 +
 .../tokyo-night-storm.css}                     |  0
 ui/web/src/main.ts                             | 18 ++++++++++++++----
 ui/web/src/types/ConfigurationType.ts          |  1 +
 4 files changed, 16 insertions(+), 4 deletions(-)
 rename ui/web/src/assets/{theme.css => themes/tokyo-night-storm.css} (100%)

diff --git a/ui/web/src/assets/config-template.json b/ui/web/src/assets/config-template.json
index 1542583a..2fc411e1 100644
--- a/ui/web/src/assets/config-template.json
+++ b/ui/web/src/assets/config-template.json
@@ -1,4 +1,5 @@
 {
+  "theme": "tokyo-night-storm",
   "uiServer": {
     "host": "localhost",
     "port": 8080,
diff --git a/ui/web/src/assets/theme.css b/ui/web/src/assets/themes/tokyo-night-storm.css
similarity index 100%
rename from ui/web/src/assets/theme.css
rename to ui/web/src/assets/themes/tokyo-night-storm.css
diff --git a/ui/web/src/main.ts b/ui/web/src/main.ts
index d40f9a25..6a22da45 100644
--- a/ui/web/src/main.ts
+++ b/ui/web/src/main.ts
@@ -9,11 +9,21 @@ import { router } from '@/router'
 
 import 'vue-toast-notification/dist/theme-bootstrap.css'
 
-import '@/assets/theme.css'
+const DEFAULT_THEME = 'tokyo-night-storm'
+
+const loadTheme = async (theme: string): Promise<void> => {
+  try {
+    await import(`./assets/themes/${theme}.css`)
+  } catch {
+    console.error(`Theme '${theme}' not found, falling back to '${DEFAULT_THEME}'`)
+    await import(`./assets/themes/${DEFAULT_THEME}.css`)
+  }
+}
 
 const app = createApp(App as Component)
 
-const initializeApp = (app: AppType, config: ConfigurationData) => {
+const initializeApp = async (app: AppType, config: ConfigurationData): Promise<void> => {
+  await loadTheme(config.theme ?? DEFAULT_THEME)
   app.config.errorHandler = (error, instance, info) => {
     console.error('Error:', error)
     console.info('Vue instance:', instance)
@@ -57,8 +67,8 @@ fetch('/config.json')
     response
       .json()
       // eslint-disable-next-line promise/no-nesting
-      .then(config => {
-        initializeApp(app, config as ConfigurationData)
+      .then(async config => {
+        await initializeApp(app, config as ConfigurationData)
         return undefined
       })
       // eslint-disable-next-line promise/no-nesting
diff --git a/ui/web/src/types/ConfigurationType.ts b/ui/web/src/types/ConfigurationType.ts
index 40586918..b76fc240 100644
--- a/ui/web/src/types/ConfigurationType.ts
+++ b/ui/web/src/types/ConfigurationType.ts
@@ -1,6 +1,7 @@
 import type { AuthenticationType, Protocol, ProtocolVersion } from './UIProtocol'
 
 export interface ConfigurationData {
+  theme?: string
   uiServer: UIServerConfigurationSection | UIServerConfigurationSection[]
 }
 
-- 
2.53.0