From ea7a1fb3e379ceeebb8383d30eb63507ac235e9d Mon Sep 17 00:00:00 2001
From: jamesread <contact@jread.com>
Date: Fri, 13 Feb 2026 23:18:35 +0000
Subject: [PATCH] fix: cssClass again again #804

---
 frontend/resources/vue/App.vue                        |  7 +++----
 integration-tests/tests/cssClass/config.yaml          |  3 +++
 integration-tests/tests/cssClass/cssClass.mjs         | 11 +++++++++++
 .../custom-webui/themes/cssclass-theme/theme.css      |  4 ++++
 4 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 integration-tests/tests/cssClass/custom-webui/themes/cssclass-theme/theme.css

diff --git a/frontend/resources/vue/App.vue b/frontend/resources/vue/App.vue
index 27bb425..5c1fa52 100644
--- a/frontend/resources/vue/App.vue
+++ b/frontend/resources/vue/App.vue
@@ -361,12 +361,11 @@ function applyTheme() {
         document.head.appendChild(themeStyle)
     }
 
-    // Load theme into @layer theme so it takes precedence over @layer components (theme is
-    // last in style.css layer order). Fixes #804 regression after beta.2.
+    // Load theme into @layer theme so it takes precedence over @layer components
     if (themePreference.value && themePreference.value !== '') {
-        themeStyle.textContent = `@layer theme { @import url('/custom-webui/themes/${themePreference.value}/theme.css'); }`
+        themeStyle.textContent = `@import url('/custom-webui/themes/${themePreference.value}/theme.css') layer(theme);`
     } else {
-        themeStyle.textContent = `@layer theme { @import url('/theme.css'); }`
+        themeStyle.textContent = `@import url('/theme.css') layer(theme);`
     }
 }
 
diff --git a/integration-tests/tests/cssClass/config.yaml b/integration-tests/tests/cssClass/config.yaml
index 3e8cfc6..8819541 100644
--- a/integration-tests/tests/cssClass/config.yaml
+++ b/integration-tests/tests/cssClass/config.yaml
@@ -7,6 +7,9 @@ listenAddressSingleHTTPFrontend: 0.0.0.0:1337
 logLevel: "DEBUG"
 checkForUpdates: false
 
+# Custom theme used to verify theme CSS applies to cssClass (e.g. action button background)
+themeName: cssclass-theme
+
 actions: []
 
 dashboards:
diff --git a/integration-tests/tests/cssClass/cssClass.mjs b/integration-tests/tests/cssClass/cssClass.mjs
index 444a6cb..f6ee292 100644
--- a/integration-tests/tests/cssClass/cssClass.mjs
+++ b/integration-tests/tests/cssClass/cssClass.mjs
@@ -29,6 +29,17 @@ describe('config: cssClass', function () {
     expect(classAttr).to.include('test-custom-class')
   })
 
+  it('custom theme applies background color to action button via cssClass', async function () {
+    await getRootAndWait()
+
+    const buttonWithClass = await webdriver.findElements(By.css('.action-button button.test-custom-class'))
+    expect(buttonWithClass).to.have.length.at.least(1, 'Action button with test-custom-class should exist')
+
+    const bgColor = await buttonWithClass[0].getCssValue('background-color')
+    expect(bgColor, 'Theme theme.css should set .action-button button.test-custom-class background to rgb(32, 64, 128)')
+      .to.match(/rgba?\(\s*32\s*,\s*64\s*,\s*128\s*(,\s*1)?\s*\)/)
+  })
+
   it('cssClass override: style rule targeting custom class wins over component styles', async function () {
     await getRootAndWait()
 
diff --git a/integration-tests/tests/cssClass/custom-webui/themes/cssclass-theme/theme.css b/integration-tests/tests/cssClass/custom-webui/themes/cssclass-theme/theme.css
new file mode 100644
index 0000000..5373d91
--- /dev/null
+++ b/integration-tests/tests/cssClass/custom-webui/themes/cssclass-theme/theme.css
@@ -0,0 +1,4 @@
+/* Theme for cssClass integration test: set a distinct background on the action button */
+.action-button button.test-custom-class {
+  background-color: rgb(32, 64, 128);
+}