Hi,
I have a Grafana graph embedded in an iframe and I want to change the URL to present either light or dark mode based on whether the browser is in that mode.
What is the best way?
type: iframe
url: >-
https://grafana.mine.life/d-solo/bekdb4mgddg5cb/forecasts?orgId=1&timezone=browser&refresh=5m&theme=light&panelId=1&__feature.dashboardSceneSolo
aspect_ratio: 50%
grid_options:
columns: full
rows: 7
card_mod:
style: |
ha-card { background: var(--card-background-color); }
If you have a browser mod, it includes a binary sensor for the device to detect dark mode. You can set the visibility condition of the card for a specific mod accordingly. If not, you have to create your own sensor.
Could you find a solution?
I have set the background in Grafana to transparent, but the following code only makes a red border around the iframe, not a red background.
card_mod:
style: |
ha-card {
background: red;
}
Is there a way to modify the background color of an iframe card with card_mod?
I know how to set a background color in grafana, but this leaves a border that I would like to avoid.
You can set different styles dependently on a mode. Go to main cardmod thread - 1st post - fantastic link - others - how to set different styles for light and dark mode.
Also note that it can be simpler: standard css variables like “—card-background” (hope I spelled it properly) already have mode-dependent values.
There is no way to modify iframe content with card-mod.
Correct, a content itself cannot be styled.
I have card-background-color correctly set in my style file, and plotly-graph card (and all others) are showing it correct, but the iframe card with a transparent Grafana is not showing this card-background-color.
On the left side is Grafana, on the right side is Plotly-Graph.
So if it’s not possible to overrule an iframe card background, I will stop searching for a solution and leave it as it is, it’s not a big problem.
