search

custom-cards / canvas-gauge-card

The card makes it possible to use gauges from https://canvas-gauges.com/
173 stars 25 forks source link

Feature: Adapt card background color to theme #13

Closed sgofferj closed 4 years ago

sgofferj commented 5 years ago

It would be beautiful if the card background color wouldn't be hardcoded to white but would adapt to the current theme.

I did this by replacing line 70 in canvas-gauge-card.js:

background-color: white !important;

with

background-color: var( --ha-card-background, var(--paper-card-background-color, white) ); !important;
4sag commented 5 years ago

not working (

sgofferj commented 5 years ago

On a running system there's also canvas-gauge-card.js.gz which seems to be preferred. So if you change the .js you also have to gzip it into the js.gz.

browetd commented 4 years ago

Thank you for the post... It is working for me (in a venv, HA 0.102.0) ! No need to change the js.gz file for my instance... Would be great to integrate this into the next release...

I just replaced "white" as recommended by:

background-color: var(--paper-card-background-color);

dohlin commented 4 years ago

I'm clearly missing something here...I tried both noted "background-color" options, with full reboots of my HA VM in between, as well as looking everywhere within the docker container config directory for the mentioned "canvas-gauge-card.js.gz" file which I do not see. Regardless the background is still white. Running an Ubuntu 18.04 VM w/ a HASS.io docker container inside. Anyone have any thoughts as to what I can try? Thanks!

helto4real commented 4 years ago

I will try to make it configurable instead. Will post a fix for you guys to try out this weekend. Have a working prototype now.

helto4real commented 4 years ago

Working copy now published, I changed the build system so the actual js file is in release not in src folder. Also now just need the one file since all dependencies are merged in build. The background color is configurable through yaml, see docs.