@eggman Try using a more structured way.
@e-raser Hi!
Post here a working code w/o using a “dark mode support” to specify a custom background to the header.
Then we’ll try to enhance it with a “dark mode support”.
Also, I see here an issue with this card - not all it’s elements follow “dark mode”. Probabaly you should register an issue for this card.
Installed Card Mod with HACS, added this to configuration
frontend:
extra_module_url:
- /hacsfiles/lovelace-card-mod/card-mod.js
When I enter this in Studio Code Server, I get Property card_mod not allowed
- type: entities
entities:
- entity: switch.garage_soffit
card_mod:
style: |
:host {
color: red;
}
Doesn’t it let you using card_mod?
Did you actually find a way of doing this?
Im trying to replace the sidebar card from HACS cos it doesnt work in 2022.7
Well this is a basic example:
type: custom:collapsable-cards
title: ⚙️ Card header
defaultOpen: desktop-only
buttonStyle: 'font-size: 26px; background-color: var(--divider-color);'
cards:
- type: entities
title: null
state_color: false
show_header_toggle: false
entities:
- entity: sun.sun
Currently I simply use the var(--divider-color) directly in the offered CSS field “buttonStyle” without card-mod being involved. But let’s say we want green background for light mode and blue for dark mode.
How would I apply this from your example…
card_mod:
style:
hui-generic-entity-row $: |
@media (prefers-color-scheme: dark) {
state-badge {color: green;}
}
@media (prefers-color-scheme: light) {
state-badge {color: blue;}
}
- Replace
state-badge(withbackground-color?) andhui-generic-entity-row(with…?) as we want to change the background. - Magically apply that to above shown
custom:collapsable-cards.
I asked about a working example of the card with card-mod “to specify a custom background to the header.”
So, provide the card-mod code for the header, then we’ll see how to apply a dark mode.
Well that’s pretty much my issue (where I need help): I don’t know how to address this element. Still not familiar with CSS inspectors.
I always only see so many trees - but no forest 
That’s the biggest mountain to climb for me, the dark mode think afterwards seems to be a bit easier because of the example code you already provided.
I cannot see a header here.
What is hidden inside shadowRoot?
Hello Everyone!
I was trying to create a “custom:vertical-stack-in-card” as an element of the main “picture-elements” card.
This is the vertical-stack-in-card code:
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:button-card
entity: script.alza_tutte_tapparelle
tap_action:
action: call-service
service: script.alza_tutte_tapparelle
- type: custom:slider-entity-row
entity: cover.finestra_soggiorno
full_row: true
- type: custom:button-card
entity: script.abbassa_tutte_tapparelle
tap_action:
action: call-service
service: script.abbassa_tutte_tapparelle
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
entity: script.arrivederci
tap_action:
action: call-service
service: script.arrivederci
- type: custom:button-card
entity: script.buonanotte
tap_action:
action: call-service
service: script.buonanotte
style:
top: 9%
left: 32.5%
width: 55%
I get the following:
which is quite fine to me, but i would like to allign vertically the slider, and i can’t figure out how to do that! I tryed many card-mod configuration, but notthing actually works
Could you kindly help me?
Thank you in advance!
Best regards.
Carmin3
There we have:
Edit/Update:
I could find the style applied using the buttonStyle card setting…
type: custom:collapsable-cards
title: 🎥 Test
defaultOpen: false
buttonStyle: 'font-size: medium; color: cyan;'
cards:
… here:
Now the only question is how to access/address this? I always struggle with that kind of “reverse engineering” of CSS with all that shadow rooting and stuff. It’s magic! 
The light/dark mode depending settings afterwards are quite easy.
I am afraid I cannot help you by watching these pictures. Unless I install the card and start testing it. May be I’ll do it a bit later.
1 Like
Oh that would be very kind Ildar. Probably the most efficient and effective way. Thank you in advance 
type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card div { align-items:center; }
horizontal: true
cards:
It works!
Thank you!
The simplified card:
type: custom:collapsable-cards
title: Card header
defaultOpen: desktop-only
buttonStyle: 'font-size: 26px; '
cards:
- type: entities
entities:
- entity: sun.sun
Default theme, light mode:
Dark mode:
How to style a header in general:
type: custom:collapsable-cards
title: Card header
defaultOpen: desktop-only
buttonStyle: 'font-size: 26px; '
cards:
- type: entities
entities:
- entity: sun.sun
card_mod:
style: |
.card-content {
background: red;
}
which gives always a red header:
Also you may specify a style for a “focused” header:
.card-content:focus {
background: orange;
}
How to process a current mode (for simplicity - same colors for focused & non-focused):
card_mod:
style: |
@media (prefers-color-scheme: dark) {
.card-content,
.card-content:focus {
background: red;
}
}
@media (prefers-color-scheme: light) {
.card-content,
.card-content:focus {
background: green;
}
}
which gives this:
Uninstalled the card)))
2 Likes
Thank you very much. I have another use case where the light/dark mode styles are not applied.
To be more precise: dark mode setting seems to be ignored.
code
- type: custom:mod-card
style: |
ha-card {
margin-left: 1px;
margin-right: 1px;
margin-top: -15px;
margin-bottom: 1px;
padding-top: 15px;
padding-bottom: 10px;
box-shadow: none;
}
@media (prefers-color-scheme: light) {
ha-card {background: #ffffff !important;}
}
@media (prefers-color-scheme: dark) {
ha-card {background: #1c1c1c !important;}
}
card:
type: horizontal-stack
columns: 2
cards:
- type: entities
title: null
state_color: true
show_header_toggle: false
entities:
- type: custom:template-entity-row
entity: switch.router_guest_wifi
name: 'Scannen:'
secondary: ''
state: ''
icon: mdi:qrcode-scan
active: >-
{{ is_state('switch.router_guest_wifi', 'on')
}}
card_mod:
style:
.: |
ha-card {
#margin-left: 1px;
#margin-right: 1px;
margin-top: -20px;
margin-bottom: 1px;
padding-bottom: 30px;
box-shadow: none;
}
- type: picture
image: /local/images/dashboards/wifi_guests_2022-07.png
tap_action:
action: url
url_path: >-
http://homeassistant.local:8123/local/images/dashboards/wifi_guests_2022-07.png
hold_action:
action: none
card_mod:
style:
.: |
ha-card {
#margin-left: 1px;
#margin-right: 1px;
margin-top: -15px;
#margin-bottom: 25px;
padding-right: 10px;
padding-top: 25px;
box-shadow: none;
}
Currently - during the day - light mode is active (setting “auto” so HA/system setting). This gives perfect view as desired:
But when switching to dark mode (via profile settings) it gives (see the white line marked in orange):
Where’s my mistake?
Are you sure that this code should work?
style: |
ha-card { ... }
ha-card { ... }
Why not - I don’t see any syntactic difference to e. g.
card_mod:
style: |
@media (prefers-color-scheme: dark) {
.card-content,
.card-content:focus {
background: red;
}
}
@media (prefers-color-scheme: light) {
.card-content,
.card-content:focus {
background: green;
}
}
Oh wait… is it the first “static” ha-card section before the two @media sections?
Do I maybe need to move that part to both @media sections?