diff --git a/compact-custom-header.js b/compact-custom-header.js index 3dc0ea8..f31eecb 100644 --- a/compact-custom-header.js +++ b/compact-custom-header.js @@ -1,4 +1,4 @@ -import "./compact-custom-header-editor.js?v=1.0.1b8"; +import "./compact-custom-header-editor.js?v=1.0.1b9"; export const LitElement = Object.getPrototypeOf( customElements.get("ha-panel-lovelace") @@ -346,6 +346,7 @@ if (!customElements.get("compact-custom-header")) { header.style.backgroundImage = null; view.style.marginTop = "0px"; view.querySelectorAll("*")[0].style.display = "initial"; + root.querySelector('[id="cch_iron_selected"]').outerHTML = ""; if (header_colors) header_colors.parentNode.removeChild(header_colors); if (Object.keys(this.cchConfig.tab_color).length) { for (let i = 0; i < tabs.length; i++) { @@ -391,6 +392,22 @@ if (!customElements.get("compact-custom-header")) { root.appendChild(style); } } + + if (!root.querySelector('[id="cch_iron_selected"]') && !this.editMode) { + let style = document.createElement("style"); + style.setAttribute("id", "cch_iron_selected"); + style.innerHTML = ` + .iron-selected { + ${this.cchConfig.active_tab_color + ? `color: ${this.cchConfig.active_tab_color + " !important"}` + : "" + } + } + + `; + tabContainer.appendChild(style); + } + if (Object.keys(this.cchConfig.tab_color).length) { let tab_color = this.cchConfig.tab_color; for (let i = 0; i < tabs.length; i++) { diff --git a/readme.md b/readme.md index b7f9dc9..5f3446a 100644 --- a/readme.md +++ b/readme.md @@ -164,6 +164,7 @@ views: |button_color|Set the color of a single tab. See example below. |notify_indicator_color|Sets the color of the new notification indicator. |notify_text_color|Sets the color of the number of new notifications inside the indicator. +|active_tab_color|Sets the color of the current tab's icon. * You may use any [valid CSS for colors](https://www.w3schools.com/cssref/pr_text_color.asp). * If using hex colors (#ffffff) be sure to enclose in quotes ("#ffffff").