dark variant

[capstan1]

I know I can adapt the styles with css, but a setting for one additional dark style would be nice for easier configuration.

Also, I noticed: titles should have more space to the first row of cards.

[DBuit]

Hi @capstan1 ,

If you can help me with what colors to use for the dark mode i will make it so you can toggle it. I will check the space!

[jimmyhawkin]

Ive changed my coloring of the style to the following to get dark themes working by just changing to what ever theme i like.

style: |
  :host {
    --tile-background: rgba(10, 10, 10, 0.22);
    --tile-border-radius: 12px;
    --tile-width: 100px;
    --tile-height: 100px;
    --tile-on-background: var(--card-background-color);

    --tile-name-text-color: var(--disabled-text-color);
    --tile-on-name-text-color: var(--primary-text-color);

    --tile-state-text-color: var(--disabled-text-color);
    --tile-on-state-text-color: var(--paper-item-icon-active-color);

    --tile-state-changed-text-color: var(--primary-text-color);
    --tile-unavailable-state-text-color: rgba(255, 0, 0, 1);

    --tile-value-text-color: var(--primary-text-color);

    --tile-icon-color: var(--disabled-text-color);
    --tile-on-icon-color: var(--paper-item-icon-active-color);

    --tile-width-mobile: 90px;
    --tile-height-mobile: 90px;

    --tile-icon-size: 30px;
    --tile-padding-top: 0
    --tile-image-radius: 0;
    } 

Slate: Clear:

But as im using a opasity based background when entity is off its best with bakgrounds when in white. But maby you can make something like homeassistant theme made with a selectable color?. Or just set the white theme to have some other coloring when entity is off 👍

In any case i think that the slate one is a good pick for coloring of a black them to switch to. And if you put upp a color table for us to pick off then its easyer when 2 people using the same system like diffrent themes colors like white and dark.