Hi!
I am trying to use theme-independent CSS but donāt get it to work.
I have used the ui-lovelace.yaml and themes.yaml and itās working great! CSS code has been added into the themes.yaml and is working as desired.
However I have multiple themes, and do not want to repeat the CSS code for each theme.
Is there any possibility to use theme independent / global CSS? In principle Iām looking for
card-mod-theme: *
I tried to move the CSS from my themes.yaml into my ui-lovelace.yaml but donāt get this to work either.
Thank you!
Hi all! I have been searching for a couple of days trying to figure out how to remove the box-shadow under app-header (or before app-toolbar) Any suggestions? 
Nevermind. I know I tried it before and it didnāt work. Tried again and worked fine.
card-mod-root: |
app-header::before {
opacity: 0!Important;
}
Is it possible to change the .dot color (the dot notification above in the sidebar on the hamburger menu)? Checked with Chrome dev tools and found this code but have no idea how to use this in my theme.yaml file.
.dot {
pointer-events: none;
position: absolute;
background-color: var(--accent-color);
width: 12px;
height: 12px;
top: 9px;
right: 7px;
border-radius: 50%;
border: 2px solid var(--app-header-background-color);
I havenāt checked recently, but I think that the sidebar isnāt one of the elements stylable. Of course, you can change the accent-color variable still.
Removed due to wrong topic, this one is about theming. I posted to š¹ Card-mod - Add css styles to any lovelace card - #2223 by e-raser.
had forgotten all about thisā¦ and yet, I can not get it to show a color according to my sensor, like:
paper-tab[label="Alarm"] {
color: {{states('sensor.alarm_panel_icon_color')}};
}
do we need to set this under a certain header? as it is, it is all under card-mod-root-yaml: |
sorry if this is too basic to not start laughingā¦
its just that I do something like that non a markdown card, and that has the desired effect:
**<font color={{states('sensor.trash_next_color')}}>{{states('sensor.afvalwijzer_next_item')|capitalize}}</font>**
as a matter of fact, I can not even get it to turn green:
paper-tab[label="Alarm"] {
color: green;
}
while I am here, could anyone point me to some explanation on device dependent settings? case: I want my header to show at the top on mobile and title at the bottom, and vice versa on desktop.
right now I cant get anything to happen to the menubar/title at all. All I see is this:
and of all settings I tested, only this sticks
compact-header:
header-height: 48px ## cant get anything to happen here....# Change this to 0px for header on the bottom. You're 1/3 there.
card-mod-root-yaml: |
.: |
/* Let's change the background. */
app-header, app-toolbar {
background: var(--primary-color);
color: var(--text-primary-color);
}
/* This changes the color of the currently selected tab. */
ha-tabs {
--paper-tabs-selection-bar-color: black;
}
paper-tab[aria-selected=true] {
color: gold;
}
/* This hides the help button. */
a.menu-link[target="_blank"] {
display: none;
}
/* This makes the plus color the same as the background. */
#add-view {
color: var(--primary-background-color);
}
paper-tab[label="Alarm"] {
color: green;
}
hope this isnt too extravagant 
thanks for having a look!
Does just this work for you at all? Have you checked thatās what the label actually is in devtools?
card-mod-root: |
paper-tab[aria-selected="true"] {
color: var(--primary-color);
}
works fine uses in my Clear theme:
Clear:
card-mod-theme: custom-header
and settings in the mod:
/* This changes the color of the currently selected tab. */
ha-tabs {
--paper-tabs-selection-bar-color: black !important;
}
paper-tab[aria-selected=true] {
color: gold !important;
}
the same mod uses
paper-tab[label="Alarm"] {
color: green !important;
}
for the Alarm tab, but doesnāt color.
this is the header of the view:
title: Alarm
icon: mdi:shield-check
path: alarm
cards:
so I guess that should be good?
I can even do:
}
paper-tab[aria-selected=true] {
color: {{states('sensor.alarm_panel_icon_color')}} !important;
and have the selected icon change color according to the template. So we know thats alright. So this leave the tab selector to be straightened out
wait!! Ive found itā¦ !
because of this
I figured I had to do it with aria-label, instead of labelā¦
paper-tab[aria-label='Alarm'] {
color: {{states('sensor.alarm_panel_icon_color')}};
}
et voila:
1 Like
now how to change the icon? can we do that too? id need something like
paper-tab[aria-label='Presence'] {
icon: {{states('sensor.presence_icon')}};
color: {{state_attr('sensor.family_home','icon_color')}};
}
scondly, I can no longer get the template to show up in the three-dots area with:
card-mod-root: |
mwc-icon-button[slot="trigger"] > ha-svg-icon {
display: none;
}
mwc-icon-button[slot="trigger"]::after {
font-size: 22px;
height: 20px;
width: 200px;
margin-left: 0px;
margin-right: 0px;
content: "{{states('sensor.time')}} - {{states('sensor.temp_current')}}Ā°";
position: absolute;
top: 14px;
right: 0px;
}
I know this is an older bit of code, but must have read this thread for 4 times now, and cant find a new way of doing itā¦ Id simply like my view title to be displayed.
not sure if that is even possible, but at least browser mod gives us path which I guess we could unslugify and capitalize using
{{state_attr('sensor.browsermod_id','path').split('/')[1].replace('_',' ').capitalize}}
took me a while, but finally I understood how to hide several option menu items (additional to hiding the Help)ā¦ sharing because I didnt find any reference to it before:
/* Hide several option menu items. */
a.menu-link[target="_blank"] {
display: none;
}
mwc-list-item[aria-label="Edit Dashboard"] {
display: none;
}
mwc-list-item[aria-label="Unused entities"] {
display: none;
}
still cant replace the vertical-dots with a template thoughā¦ anyone please help me out there?
Hi guys,
yesterday was a sad day. I had to finally get rid of Custom Header as it made problems with the newest Update. I am used to have my Header Icons colored, see image below or GitHub - philipp089/Home-Assistant-Config: HA Config and UI
After some trial i was finally able to change the color of the icons globally but is there a way to color each icon individually with card-mod? Any help is greatly appreciated. Other things i want to change is to get rid of the right menu (three-dotted-menu) and i want to change the box shadow. Normally i do it with:
- type: "custom:mini-media-player"
artwork: cover
entity: media_player.tv_samsung_q7_series_55
name: Fernseher Wohnzimmer
style: |
ha-card {
box-shadow: 1px 1px 1px 1px var(--divider-color);
}
but i have no clue how to affect the header. Can someone point me in the right direction here?
I posted the same question here:
in case one thread might seem wrong to anybody, please let me know and i delete the doubled question.
Cheers,
Philipp
I have what I hope is a simple question. I have a view that, depending on the width of the browser, can be either 1 or 2 columns. The main set of cards is always in the first column and includes many custom button cards for mainly device control. The column is resizeable using custom:grid-layout
type: custom:grid-layout
layout:
grid-template-columns: 1% minmax(425px, 660px) 1% minmax(425px, 1200px) 1%
grid-template-rows: auto
grid-template-areas: |
"marg1 col1 marg3 col2 marg2"
mediaquery:
"(max-width: 800px)":
grid-template-columns: 100%
grid-template-areas: |
"col1"
"col2"
and I am trying to automatically resize the fonts in all cards based on the width of the column. I have created mediaqueries in my theme as follows:
card-mod-card: |
@media (orientation: portrait) {
:host {
font-size: 12px;
}
}
@media (min-width: 350px) {
:host {
font-size: 10px;
}
}
@media (min-width: 400px) {
:host {
font-size: 12px;
}
}
@media (min-width: 500px) {
:host {
font-size: 14px;
}
}
@media (min-width: 575px) {
:host {
font-size: 16px;
}
}
@media (min-width: 650px) {
:host {
font-size: 18px;
}
}
This works great on my phone, and when there is only a single column in my browser. As I widen the screen, the fonts all get progressively larger. However, when the browser screen is wide enough to start a 2nd column, it no longer works because the queries are based on the screen width and not the column width. I have not been able to figure out how to do this. I have tried several things as follows but none of them work. Hopefully, it is just a syntax issue. Any help would be greatly appreciated.
@media (min-column-width: 350px) {
:host {
font-size: 10px;
}
}
@media (min-width / column-count: 1050px) {
:host {
font-size: 10px;
}
}
@media (min-width / columns: 1050px) {
:host {
font-size: 10px;
}
}
thanks a lot for pointing that out 
thanks again Marius, made my day 
Even more flexible then the old CH-way because of the integration in themes.yaml.
Google - Dark:
### Card Mod ###
card-mod-theme: Google - Dark
card-mod-root: |
paper-tab[aria-label='Licht'] {
color: #F4B400;
}
paper-tab[aria-label='Media'] {
color: #0F9D58;
}
etc. etc.
1 Like
help me back find a way we did the icon for the tabsā¦
just as color, Id love to change icons based on state for the tabs
tab_icons:
settings_motion: >-
{%- if states('binary_sensor.motion_sensors_all') == 'on' -%}mdi:motion-sensor
{%- else -%}mdi:motion-sensor-off
{%- endif -%}
to give but a legacy CH example. If havent found a way to touch the tab icons yet in the theme card-mod options
I did stuff like this with the following code, but not sure if that works for the tabs
switch: |
[[[
if(entity.state == 'on') return `<ha-icon
icon="mdi:toggle-switch"
style="width: 60%; height: 50px; color: #4285f4;">
</ha-icon>` ;
else
return `<ha-icon
icon="mdi:toggle-switch-off"
style="width: 60%; height: 50px; color: var(--text-primary-color);">
</ha-icon>` ;
]]]
no, that wont work I fear.
personally I dont use those domain settings in card-mod-theme, because it only changes that in the frontend, and eg not in more-info or logbook unfortunately.
need either backend logic, core HA frontend logic, or, ofc, custom-ui 
having said that, I can not imagine we shouldnāt be able to change those tab icons using card-mod-theme somehow. Just havent found it yet. I hope.
Custom Header was truly unique and I miss it on a daily base.
Iām now using card mod, but if i use this, i still sometimes see a black bar above, and then when i refresh page, the bar is goneā¦ how can i fix this? thnx in advance , appreciated
card-mod-root: |
app-header {
display: none;
}
card-mod-view: |
#view {
min-height: 100vh !important;
}
@KTibow , seems you helped me before with the code above a long time ago 
seems issue is back, you have any idea?