Is there a way to flag a Lovelace dashboard based on some state?
I have a boolean ''Open Shop" that is true when I am in it.
I added “shop” to the dashboard and if a boolean is set, I would like to change the color or icon in some way.
Is that possible?
Yes, there is a way using card-mod theme, but it’s quite complex.
Here’s an example how would it look:
my_custom_theme:
card-mod-theme: my_custom_theme
card-mod-sidebar: |
{% if is_state('input_boolean.test', 'on') %}
.ha-scrollbar a[data-panel="lovelace-shop"] ha-icon {
--card-mod-icon: mdi:car-connected;
color: green;
}
.ha-scrollbar a[data-panel="lovelace-shop"] .item-text {
visibility: hidden;
font-size: 0px;
height: 24px;
}
.ha-scrollbar a[data-panel="lovelace-shop"] .item-text::after {
visibility: visible;
content: "Open Shop";
font-size: 14px;
}
{% else %}
.ha-scrollbar a[data-panel="lovelace-shop"] ha-icon {
--card-mod-icon: mdi:car-wrench;
}
{% endif %}
....
CSS variables for theme
....
That is exactly what I want.
I am still not there yet.
Is there more than just adding the theme?
So I created the input_boolean.test. I added it to the shop dashboard. What am I missing?
I assume I do not need the ‘’‘css variables for theme’’’ or is that what I am missing?
This is the name of the input_boolean
I dropped down the Theme so you can see what I called it, and I think it is loaded.
Not sure if this info helps?
I think I got some right, just not for the sidebar.
So I added a row to the theme.
Then I did a quick entities card and it did show the white lines. I changed from black in the example to white for the dark theme. 
With that experiment, I started to think I need to apply the theme somehow somewhere, just not sure where right now.
That got me down the road, I called the set service to set it to the test theme and it affected the side bar. Now I am trying to go back to the default. Looks like digging for the next lesson.
I was able to get it back to the default set to auto, which on my browser is dark.
So to use the custom theme, is there a way for it still follows the default colors?
Or do I need to define a dark theme? Is this for another thread?
Yes you should put that code in your default theme, if you use HA’s default, your better of installing a custom-theme:
So if you create/or download a custom-theme, you put the code inside that … there is some way also, where a custom-theme inherit default, and “apply” additional custom … thou most people just use a custom, and edit to their choices/taste
Here are some examples of theme:
You can select theme manually in your profile page, or you can also use frontend.set_theme service, which will set theme for every user if Backend-selected option is picked.
So to use the custom theme, is there a way for it still follows the default colors?
Or do I need to define a dark theme? Is this for another thread?
You need to declare CSS styles in your custom theme, which would replicate default dark theme.
You can find styles used for HA default dark theme here:
home-assistant/frontend/blob/dev/src/resources/styles.ts
So now you need to put these styles in your custom theme like this:
my_custom_theme:
card-mod-theme: my_custom_theme
card-mod-sidebar: |
{% if is_state('input_boolean.test', 'on') %}
.ha-scrollbar a[data-panel="lovelace-shop"] ha-icon {
--card-mod-icon: mdi:car-connected;
color: green;
}
.ha-scrollbar a[data-panel="lovelace-shop"] .item-text {
visibility: hidden;
font-size: 0px;
height: 24px;
}
.ha-scrollbar a[data-panel="lovelace-shop"] .item-text::after {
visibility: visible;
content: "Open Shop";
font-size: 14px;
}
{% else %}
.ha-scrollbar a[data-panel="lovelace-shop"] ha-icon {
--card-mod-icon: mdi:car-wrench;
}
{% endif %}
primary-background-color: "#111111"
card-background-color: "#1c1c1c"
secondary-background-color: "#202020"
primary-text-color: "#e1e1e1"
secondary-text-color: "#9b9b9b"
disabled-text-color: "#6f6f6f"
app-header-text-color: "#e1e1e1"
app-header-background-color: "#101e24"
switch-unchecked-button-color: "#999999"
switch-unchecked-track-color: "#9b9b9b"
divider-color: "rgba(225, 225, 225, .12)"
mdc-ripple-color: "#AAAAAA"
input-idle-line-color: "rgba(255, 255, 255, 0.42)"
input-hover-line-color: "rgba(255, 255, 255, 0.87)"
input-disabled-line-color: "rgba(255, 255, 255, 0.06)"
input-outlined-idle-border-color: "rgba(255, 255, 255, 0.38)"
input-outlined-hover-border-color: "rgba(255, 255, 255, 0.87)"
input-outlined-disabled-border-color: "rgba(255, 255, 255, 0.06)"
input-fill-color: "rgba(255, 255, 255, 0.05)"
input-disabled-fill-color: "rgba(255, 255, 255, 0.02)"
input-ink-color: "rgba(255, 255, 255, 0.87)"
input-label-ink-color: "rgba(255, 255, 255, 0.6)"
input-disabled-ink-color: "rgba(255, 255, 255, 0.37)"
input-dropdown-icon-color: "rgba(255, 255, 255, 0.54)"
codemirror-keyword: "#C792EA"
codemirror-operator: "#89DDFF"
codemirror-variable: "#f07178"
codemirror-variable-2: "#EEFFFF"
codemirror-variable-3: "#DECB6B"
codemirror-builtin: "#FFCB6B"
codemirror-atom: "#F78C6C"
codemirror-number: "#FF5370"
codemirror-def: "#82AAFF"
codemirror-string: "#C3E88D"
codemirror-string-2: "#f07178"
codemirror-comment: "#545454"
codemirror-tag: "#FF5370"
codemirror-meta: "#FFCB6B"
codemirror-attribute: "#C792EA"
codemirror-property: "#C792EA"
codemirror-qualifier: "#DECB6B"
codemirror-type: "#DECB6B"
energy-grid-return-color: "#a280db"
P.S if there is a change in default HA dark styles(new style, new variable and etc.), you need to update your custom theme styles again(to fully replicate HA dark theme).
That helped connect a few dots in Lovelace (dashboard), I am sure there are many left to connect.
It works, but I am trying to understand a little deeper. There is the if else. The if is when the shop is open and the else is when it is not open. If true, it sets the icon to green and hides the text. Then changes the text. What is the “after” keyword for when it is set back to visible? I assume the act of hidden/visible causes some sort of refresh, is that correct?
Then the else part only specifies the icon but does not reset the text. Does the act of setting the icon reset the color and since there is no text, it is reset back to default? Is that why we have to say “after” so it does not reset the icon?
As I said, it was as desired, I would like to remove some magic.
What is the “after” keyword for when it is set back to visible? I assume the act of hidden/visible causes some sort of refresh, is that correct?
It’s a CSS pseudo-element: ::after. That visibility part, hides default text “Shop” and replaces it with “Open Shop”. It’s kind a hacky way to replace text inside an element when it’s out of CSS reach.
Then the else part only specifies the icon but does not reset the text. Does the act of setting the icon reset the color and since there is no text, it is reset back to default?
In that part there is no need to inject styles with card-mod, because browser will use default ones. You only need to specify icon here, because somehow it does not reset icon to default when it’s specified with --card-mod-icon. Reloading page will reset it, but I don’t think it’s acceptable.