fix: cssClass again again #804

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);`
     }
 }
 

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:

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()
 

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);
+}