Moon in shadow color black

[Tom-ahawk]

The latest version is the coolest card ever! Thanks for your effort.

Please consider making the white color black for the part of the moon in the earths shadow. Or a parameter so the user can select white/black/color. Alternatively a black border line for the visible moon.

The moon icon under Azimuth and Elevation, should they have the same icon as the moons form?

[avataar]

It's impossible to satisfy everyone's color preferences. Luckily, there's card-mod.

These are the defaults when using a light theme:

card_mod:
  style: |
    .horizon-card-graph {
      --hc-moon-hue: 52;
      --hc-moon-saturation: 77%;
      --hc-moon-lightness: 57%;
      --hc-moon-color: hsl(
        var(--hc-moon-hue),
        calc(var(--hc-moon-saturation) - var(--hc-moon-saturation-reduce)),
        calc(var(--hc-moon-lightness) - var(--hc-moon-lightness-reduce))
      );
      --hc-moon-shadow-color: #eeeeee;
      --hc-moon-spot-color: rgba(170, 170, 170, 0.1);
    }

And when using a dark theme:

card_mod:
  style: |
    .horizon-card-graph {
      --hc-moon-hue: 52;
      --hc-moon-saturation: 80%;
      --hc-moon-lightness: 74%;
      --hc-moon-color: hsl(
        var(--hc-moon-hue),
        calc(var(--hc-moon-saturation) - var(--hc-moon-saturation-reduce)),
        calc(var(--hc-moon-lightness) - var(--hc-moon-lightness-reduce))
      );
      --hc-moon-shadow-color: #272727;
      --hc-moon-spot-color: rgba(170, 170, 170, 0.1);
    }

You can leave only the --hc-moon-shadow-color if that's the only thing you want to change.

Note also that if you want to change the color of the visible Moon (--hc-moon-color) it's best to tweak the individual components (hue, saturation, lightness) as this will integrate with the color changes according to the position above the horizon.

[avataar]

The Moon phase color uses the same color as other HA icons in various cards. You can tweak that with card-mod too:

card_mod:
  style: |
    .horizon-card-field-moon-phase ha-icon {
      color: var(--hc-secondary);
    }

--hc-secondary is the color of the field names, --hc-primary is the color of the field values. You can also use any color of your liking, e.g. color: pink.

[v1k70rk4]

@avataar You are a hero.