Add css var for meta theme-color attribute (#20558)

* add app-theme-color var

* Fix Prettier format
This commit is contained in:
Nicooow 2024-04-22 09:51:21 +02:00 committed by GitHub
parent 141107f1f3
commit 7ecf8b755e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 4 additions and 4 deletions

View File

@ -102,6 +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)",
"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)",

View File

@ -130,9 +130,8 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
const themeMeta = document.querySelector("meta[name=theme-color]");
const computedStyles = getComputedStyle(document.documentElement);
const headerColor = computedStyles.getPropertyValue(
"--app-header-background-color"
);
const themeMetaColor =
computedStyles.getPropertyValue("--app-theme-color");
document.documentElement.style.backgroundColor =
computedStyles.getPropertyValue("--primary-background-color");
@ -145,7 +144,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
);
}
const themeColor =
headerColor?.trim() ||
themeMetaColor?.trim() ||
(themeMeta.getAttribute("default-content") as string);
themeMeta.setAttribute("content", themeColor);
}