darkMode option with templating does not work correctly

[ksendor]

Version: v0.1.4

My Home Assistant backend-selected theme changes based on sun entity. Automation for that uses this blueprint.

This is my sun card configuration:

type: 'custom:sun-card'
darkMode: '{{ is_state("sun.sun", "below_horizon") }}'

I tried converting it to string too (see below).

Issue: The card does not change appearance correctly. It is constantly rendered as if darkMode was set to True.

Templating outputs:

{{ is_state("sun.sun", "below_horizon") }}                         # False

{{ is_state("sun.sun", "below_horizon") is boolean }}              # True

{{ is_state("sun.sun", "below_horizon") | string }}                # False

{{ (is_state("sun.sun", "below_horizon") | string) is boolean }}   # False

I tried {{ (states("sun.sun") == "below_horizon") }} too but it gives same results.

---

1. What would the correct/working configuration look like?
2. DIfferent Lovelace cards don't have darkMode option in configuration and they render correctly. Is that because they use themes colour palette for fonts? Why it's not the case with sun-card?

[AndyVRD]

I have mention this on Reddit and he will fix this in one of a future update. The problem is that he is using different CSS style names for the subtitle and text colors.

sun-card-subtitle-color = --primary-text-color sun-card-text-color = --secondary-text-color

[AitorDB]

I think the issue could be that the output is capitalized (probably a python thing?), so it's always evaluated as true (because how typescript/javascript work). I'll give it a try and fix it.

About the style text colors, this PR should help to fix it https://github.com/AitorDB/home-assistant-sun-card/pull/47

[AitorDB]

I have made a few tries and I didn't manage to use templating on cards, not only this one but the native ones neither, do you use a special integration for that?

About your second question: This card reads darkMode from home assistant, that means it should adapt the colors depending on that value (it will use the colors of home assistant in next releases), that configuration option allows you to enforce a specific one if that's something you want to do, but it's not required

[bigmak40]

I would just do this via a conditional. The below works great.

type: entities
entities:
  - type: conditional
    conditions:
      - entity: sun.sun
        state: below_horizon
    row:
      type: custom:sun-card
      darkMode: true
  - type: conditional
    conditions:
      - entity: sun.sun
        state: above_horizon
    row:
      type: custom:sun-card

[ksendor]

This is my bad. I rechecked my theme and noticed that it was created before HA support for modes in themes. I'm using (quite popular) light-soft-ui and dark-soft-ui and I'm switching between them both with automation (selecting current backend-selected theme based on sun.sun).

The colours from this card appear correct in each of these themes if I enable/disable darkMode correctly (although they are custom and not from theme palette).

I would have to edit these themes to add support for modes (which I don't want to do because they are installed via HACS) or use conditions like @bigmak40 proposed which will work (good idea 👍). The third option would be probably some configuration of this card that would allow using palette of theme instead of custom one defined in /src/cardStyles.ts (I think) but this is only wishful thinking.

Feel free to close this issue @AitorDB unless you would like me to provide any extra information.

[ronaldheft]

I managed to work around this with card-mod:

- type: custom:sun-card
  entity: sun.sun
  timeFormat: 12h
  card_mod:
    style: |
      .sun-card.sun-card-light {
        --sun-card-lines: var(--disabled-text-color) !important;
        --sun-card-text-color: var(--primary-text-color) !important;
        --sun-card-subtitle-color: var(--secondary-text-color) !important;
      }

[joaquincasares]

+1 on making @ronaldheft 's logic part of the default component.

It makes it harder to allow for certain devices to use light-background-based themes and others use dark-background-based themes if we have to hardcode darkMode for the system.