Fix app-theme-color not following header color (#20758)

* Fix app-theme-color not following header color * Revert incorrect fix for #20671 that only applies when a primary color is set by the user
home-assistant · May 22, 2024 · 19f94ff · 19f94ff
1 parent 0b6994d
commit 19f94ff
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/common/dom/apply_themes_on_element.ts b/src/common/dom/apply_themes_on_element.ts
@@ -61,8 +61,11 @@ export const applyThemesOnElement = (
     const accentColor = themeSettings?.accentColor;
 
     if (darkMode && primaryColor) {
-      themeRules["app-theme-color"] = hexBlend(primaryColor, "#121212", 8);
-      themeRules["app-header-background-color"] = themeRules["app-theme-color"];
+      themeRules["app-header-background-color"] = hexBlend(
+        primaryColor,
+        "#121212",
+        8
+      );
     }
 
     if (primaryColor) {

diff --git a/src/resources/styles-data.ts b/src/resources/styles-data.ts
@@ -102,7 +102,7 @@ export const derivedStyles = {
   "mdc-theme-error": "var(--error-color)",
   "app-header-text-color": "var(--text-primary-color)",
   "app-header-background-color": "var(--primary-color)",
-  "app-theme-color": "var(--primary-color)",
+  "app-theme-color": "var(--app-header-background-color)",
   "mdc-checkbox-unchecked-color": "rgba(var(--rgb-primary-text-color), 0.54)",
   "mdc-checkbox-disabled-color": "var(--disabled-text-color)",
   "mdc-radio-unchecked-color": "rgba(var(--rgb-primary-text-color), 0.54)",