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});
});
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
I downloaded card-mod in HACS, yet I cannot pass the simple ādoes it workā step in the documentation. Any help would be appreciated.
Because you are not exactly following Docs - it contains an example for Entities card.
No, because I tend to provide a closing ā}ā bracket:
Have you tried clearing the cache on your phone? In the ios app code also works.
Settings > Companion app > Debugging > Reset frontend cache
Hi im not into css / coding but im learning slowly.
is there a way to format the text size along a line so as to make some text smaller?
any help would be much appreciated, thanks
Only a text in a dedicated element (h3, prev, ā¦) may be styled.
Or, in case of a Markdown card, you can use ābā tags to make a text bold.
I have a markdown card with dynamic heigh. It includes some h1/h2 + weather forecast for today and tomorrow - each forecast is a variable coming from a sensor (weather website), and each is in its own separate paragraph. Each forecast could be 1-3 lines (on mobile even 1-6 lines).
How can I make the height of the markdown card dynamic? I sometimes just get part of todayās weather and canāt see next day.
For context - the dashboard has a āsectionsā layout, and the markdown is the top element with āfull width cardā setup
grid_options:
columns: full
rows: 6
Basically I want ārows:6ā to to be adjusted dynamically based on the actual markdown height
- type: custom:mushroom-template-card
primary: Deur Openen
tap_action:
action: fire-dom-event
browser_mod:
service: script.deur_openen
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
text-align: center !important;
.: |
ha-card {
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3) !important;
background-color: rgb({{ states("input_text.kleur_iconen_bleker")}}) !important;
width: 160px;
height: 100px !important;
}
ha-card:active {
transform: scale(1.02);
transition: 0s;
}
how do I center the button ?
which button?
this seems centeredā¦:
btw, why use template card if you dont use templates in the mushroom config?
might just as well use a core type:button
kiss
type: vertical-stack
cards:
- type: picture-entity
camera_image: camera.deurbel_profile_name
camera_view: live
entity: camera.deurbel_profile_name
show_state: false
name: livebeeld
- type: custom:mushroom-template-card
primary: Deur Openen
tap_action:
action: fire-dom-event
browser_mod:
service: script.deur_openen
my excuses, it was half of the code. the ādeur openenā button has to be in the center ā¦
well do as I suggested, use a core button card, and it auto centers
you can ditch the browser_mod stuff too, just have the button execute the script
type: vertical-stack
cards:
- type: picture-entity
entity: camera.deurbel_profile_name
camera_view: live
- type: button
name: Deur Openen
tap_action:
action: perform-action
perform_action: script.turn_on
data:
entity_id: script.deur_openen
heck, you can even ditch the complete button and set the action to the picture-entity if you want