Another thread - card-mod-themes.
Thanks! I got it working!
hi, i am brand new and trying to learn. i have this card on my dashboard and would like to increase the font size, remove the border and background. can you tell me what i need to do /code i need?
Posting your working code can help other users.
ok, i think i got it. instead of
.badges hui-heading-badge:nth-child(1) hui-entity-heading-badge $: |
ha-heading-badge
it should now be
.badges hui-heading-badge:nth-child(1) hui-entity-heading-badge $: |
ha-state-icon
should be called.
2 Likes
Iām trying to get my dashboard cleaned up and wanted to have some kind of status display for my appliances (dishwasher, washing machine, tumble dryer)
My goal was to have the icons green when finished and red when running.
This is my code so far:
type: entities
entities:
- entity: input_text.waschmaschine_status
type: custom:multiple-entity-row
name: WƤsche
show_state: false
show_icon: false
entities:
- icon: mdi:washing-machine
state_color: true
card_mod:
style: |
.entities-row div.entity:nth-child(1) {
{% set state = states('input_text.waschmaschine_status') %}
{% if state == 'ready' %}
--state-icon-color: green;
{% else %}
--state-icon-color: red;
{% endif %}
}
- icon: mdi:tumble-dryer
state_color: true
card_mod:
style: |
.entities-row div.entity:nth-child(2) {
{% set state = states('input_text.trockner_status_status') %}
{% if state == 'ready' %}
--paper-item-icon-color: green;
{% else %}
--paper-item-icon-color: red;
{% endif %}
}
- icon: mdi:dishwasher
state_color: true
show_header_toggle: false
state_color: true
Unfortunately it doesnāt work. Can any of you point me in the right direction?
Check for proper styles here: 1st post of this thread ā link at the bottom titled āfantastic postā ā multiple-entity-row
i āfixedā your code to work with template, hope help uā¦
Regrats!
type: custom:mushroom-template-card
icon: mdi:lock
fill_container: false
icon_color: yellow
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
multiline_secondary: false
layout: vertical
entity: input_boolean.menu_lock_luzes_piso_01
primary: ""
card_mod:
style: |
ha-card {
content: '';
overflow: visible !important;
box-shadow: none !important;
border: none !important;
transition: all 0s;
}
:host {
position: sticky;
z-index: 4;
top: 0px;
}
ha-card::before {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 50%;
height: 100%;
box-shadow: 0 0 10px 5px red,0 0 30px 10px red;
z-index: -1;
animation: half-yellow-shadow 5s infinite linear;;
border-radius: 5px;
}
ha-card::after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 50%;
height: 100%;
box-shadow: 0 0 10px 5px #0ff,0 0 30px 10px #0ff;
z-index: -1;
animation: half-cyan-shadow 10s infinite ease;;
border-radius: 5px;
}
@keyframes gradient-shadow-card {
0% {
box-shadow: 0 0 10px 5px darkblue,0 0 30px 10px darkblue;
}
25% {
box-shadow: 0 0 10px 5px blue,0 0 30px 10px blue;
}
}
@keyframes boxShadowPulse {
0% {
box-shadow: 0px 0px 10px 6px rgba(var(--rgb-blue), 0.5), 0px 0px 20px 12px rgba(var(--rgb-blue), 0.3);
}
50% {
box-shadow: 0px 0px 15px 8px rgba(var(--rgb-blue), 0.8), 0px 0px 25px 15px rgba(var(--rgb-blue), 0.5);
}
100% {
box-shadow: 0px 0px 10px 6px rgba(var(--rgb-blue), 0.5), 0px 0px 20px 12px rgba(var(--rgb-blue), 0.3);
}
}
@keyframes half-yellow-shadow {
0% {
top: 0;
left: 0;
height: 50%;
width: 50%;
}
16.66% {
top: 0;
left: 0;
height: 50%;
width: 100%;
}
32.32% {
top: 0;
left: 50%;
height: 50%;
width: 50%;
}
49.98% {
top: 50%;
left: 50%;
height: 50%;
width: 50%;
}
66.64% {
top: 50%;
left: 0;
height: 50%;
width: 100%;
}
83.3% {
top: 50%;
left: 0;
height: 50%;
width: 50%;
}
100% {
top: 0;
left: 0;
height: 50%;
width: 50%;
}
}
@keyframes half-cyan-shadow {
0% {
bottom: 0;
right: 0;
height: 50%;
width: 50%;
}
16.66% {
bottom: 0;
right: 0;
height: 50%;
width: 100%;
}
32.32% {
bottom: 0;
right: 50%;
height: 50%;
width: 50%;
}
49.98% {
bottom: 50%;
right: 50%;
height: 50%;
width: 50%;
}
66.64% {
bottom: 50%;
right: 0;
height: 50%;
width: 100%;
}
83.3% {
bottom: 50%;
right: 0;
height: 50%;
width: 50%;
}
100% {
bottom: 0;
right: 0;
height: 50%;
width: 50%;
}
}
Hello,
is it possible to adapt colors depending on the theme you choose? i dont want to create a new theme because in my family each one is using a different theme. hence I would like to define like āif theme is dark, then background should be grey. if light then blue and if you have bubble theme then redā .
is something like that possible?
1st post of this thread ā link at the bottom āfantastic postā ā other staff
Thanks a lot!! I tried this one but it did not workā¦ I got cyan or none showed in light modeā¦ I tried with standard light/dark modeā¦ I tried with safari mac
type: entities
entities:
- entity: sun.sun
name: cyan if DARK
card_mod:
style:
hui-generic-entity-row $: |
@media (prefers-color-scheme: dark) {
state-badge {color: cyan;}
}
@media (prefers-color-scheme: light) {
state-badge {color: red;}
}
Donāt use safariā¦ Your code works.
Cannot find a proper smile, let it be 
In short - have to agree.
Markdown - style for āhrā
Triple āunderscoreā char is converted to a horiz line (āhrā element):
type: markdown
content: |-
xxx
___
xxx
If someone wants to make this line more vivid, red etc - and does want to use card-mod for each card - then use an external js:
customElements.whenDefined('ha-markdown').then(() => {
const Markdown = customElements.get('ha-markdown');
const { html, css } = Markdown.prototype;
const newStyle = css`hr {
border-color: red;
border-style: solid none none none;
}`;
const newStyles = [].concat(Markdown.styles, newStyle);
Object.defineProperty(Markdown, 'styles', {value: newStyles, configurable: true, enumerable: false});
Object.defineProperty(Markdown, 'elementStyles', {value: newStyles, configurable: true, enumerable: false});
});
1 Like
with chrome it works too. But on my HA App on iPhone it does not work either. And dont write I should buy another phone 
I try now to solve it with a special themeā¦ i could not figure out how I can define the fallback color (here rgb(60,60,60) to be the standard color of the theme without knowing the according variable. Chatgpt told me i should take āinheritā instead. But it did not work. Any ideas?
.bubble-button-card-container {
background-color: var(--tom-security-card-background, rgb(60, 60, 60)) !important;
}
PS sorry those question. I just started with the css topicā¦ uff, pretty complex one.
Hello everyone, I have a doubt.
I have a dashboard to show the average temperature of 4 sensors. Sometimes when I refresh my browser tab, it seems that the CSS of the card-mod does not load properly. Does it happen to you?
Code:
- type: state-label
entity: sensor.temperatura_sin_grados
style:
top: 80%
left: 24%
font-size: 410px
card_mod:
style: |
:host {
font-family: "LCDWinTT";
color: #00ff3e;
text-shadow: 0 0 10px rgba(0, 255, 62, 0.8),
0 0 20px rgba(0, 255, 62, 0.6),
0 0 30px rgba(0, 255, 62, 0.4);
- type: state-label
entity: sensor.humedad_sin_porcentaje
style:
top: 80%
left: 68%
font-size: 410px
card_mod:
style: |
:host {
font-family: "LCDWinTT";
color: blue;
text-shadow: 0 0 10px rgba(0, 0, 255, 0.8),
0 0 20px rgba(0, 0, 255, 0.6),
0 0 30px rgba(0, 0, 255, 0.4);
- type: state-label
entity: sensor.co2_sin_ppm
style:
top: 25%
left: 45%
font-size: 600px
card_mod:
style: |
:host {
font-family: "LCDWinTT";
color: red;
text-shadow: 0 0 10px rgba(255, 0, 0, 0.8),
0 0 20px rgba(255, 0, 0, 0.6),
0 0 30px rgba(255, 0, 0, 0.4);
I previously searched another post about this issue that recommends to put this code on the configuration.yaml, but I think it does not work:
frontend:
extra_module_url:
- /local/wherever/card-mod.js
you can also create a template sensor, and use that to template your colors in card mod.
Personally I dont use the dark and light modes theme functionality.
My theme either have a dark tonality or a lighter tonality. The darker ones have names that are searched for in this template:
{{states('input_select.theme') is
search('ight|Dark|Matrix',ignorecase=True)}}
so what this does is check which theme is selected, and whether it contains a string in the theme name (Midnight, Dark red, Dark orange, etc etc)
if yes, than the boolean turns true
based in that boolean state you can do what ever you want in card-mod
card_mod:
style: |
ha-card {
box-shadow: none;
background:
{% set dark = is_state('binary_sensor.donker_thema','on') %}
{% if not dark %} var(--ha-color)
{% endif %};
}
works perfectly, and no issue in Safari
also I card-mod theme:
/* Set the toolbar background. */
.header, .toolbar {
background: {% if kerst %} url('/local/wallpapers/snow.mp4')
{% elif donker_thema %}
radial-gradient(var(--primary-color),var(--card-background-color))
{% else %} var(--primary-color)
{% endif %};
color: var(--app-header-text-color)';
}
or get really crafty with:
map-background:
card-mod-theme: map-background
<<: *card-mod-card-yaml
card-mod-view: |
/*vertical-layout {
{% set dark = is_state('binary_sensor.donker_thema','on') %}
{% set flt =
'invert(.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) saturate(.3)' %};
background: center/cover no-repeat url('/local/wallpapers/map.png') fixed;
filter: {{flt if not dark else 'none'}};
}*/
vertical-layout {
background:
{% set dark = is_state('binary_sensor.donker_thema','on') %}
{% set extension = '_dark' if dark else '' %}
center/cover no-repeat url('/local/wallpapers/map{{extension}}.png') fixed;
}
hui-sections-view {
background:
{% set dark = is_state('binary_sensor.donker_thema','on') %}
{% set extension = '_dark' if dark else '' %}
center/cover no-repeat url('/local/wallpapers/map{{extension}}.png') fixed;
}
but the latter is truly card-mod themeā¦ sorry
back on topic, in the themes file I did add this to my dark themes:
<<: &dark-theme
# https://github.com/home-assistant/frontend/blob/b83be385141a6d4513afc4848902745bcc31054f/src/components/map/ha-map.ts#L559
# https://github.com/home-assistant/frontend/blob/b83be385141a6d4513afc4848902745bcc31054f/src/resources/styles-data.ts#L54
map-filter: 'invert(.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) saturate(.3)'
and that sets the nice dark background on the maps in my dark themes and not have them blind my eyes
thats the reason I have that particular card-mod theme section commented, itās just in my plain theme file
