Analog clock in Home Assistant, how to deal with themes

Hi,

I have added the following manual card to Home Assistant Lovelace:

type: iframe
url: /local/analog-clock/analog-clock.svg
aspect_ratio: 60%

The result looks fine:

However, when the system changes to Juanmtech Google Dark Theme during the evening, the clock looks like this:

My question is how I can change the SVG file or the theme so that the black parts of the clock will change to white when the dark theme is being used. Thanks in advance for your reaction.

In the meantime, I was able to change the color of the SVG file. However, I still need to find a way to switch between the two SVG files if the system switches from the light to dark theme and vice versa. Please let me know if you have an idea to make this happen. Thanks!

Would you be willing to share the files for this clock, so I can try some experiments?

I have figured it out :grinning:. I have created two conditional cards with the following code:

type: conditional
conditions:
  - entity: sun.sun
    state: below_horizon
card:
  type: iframe
  url: /local/analog-clock/station-clock-dark.svg
  aspect_ratio: 60%
type: conditional
conditions:
  - entity: sun.sun
    state: above_horizon
card:
  type: iframe
  url: /local/analog-clock/station-clock-light.svg
  aspect_ratio: 60%

Now it is working in line with my expectations. I am not able to upload SVG files in the community. I can send them via e-mail if you want.

1 Like

Witam. Mogę prosić o plik zegara? Z góry serdecznie dziękuję i pozdrawiam. Krzysztof

A zapomniałem podać mail dla udostępnienia plików zegara. Jeszcze raz dziękuję i pozdrawiam. Krzysztof. Mail: [email protected]

You can get (and customize beforehand) the file here:
http://www.3quarks.com/en/SVGClock/