JS template for config-template-card not working

Share your Projects! Dashboards & Frontend
1

Continuing the discussion from :small_blue_diamond: Card-mod - Add css styles to any lovelace card:

using

        - type: custom:config-template-card
          entities:
            - input_select.theme
          variables:
            darkmode: states['input_select.theme'].state.includes(['ight','Dark','Matrix'])
          card:
            type: custom:auto-entities
            show_empty: false
            filter:
              include:
                - domain: person
                  not:
                    state: home
            card:
              type: map
              hours_to_show: 48
              dark_mode: ${darkmode}
              card_mod:
                style: |
                  ha-card {
                    box-shadow: none;
                  }

my goal is to set the maps to dark mode. This works fine if I only use 1 search string:

darkmode: states['input_select.theme'].state.includes('Dark')

so I know the template and the variable are seen correctly. However, all my includes template versions in my config use either this method, or use it at the beginning:

if (['open', 'on'].includes(states[child_entity].state))

ofc I also tried

 darkmode: ['ight','Dark','Matrix'].includes(states['input_select.theme'].state)

but that too errors. also tried quoting the full template or enclosing it in ().
even tried the regex style .state.includes('(ight|Dark|Matrix)') which works in the jinja templates.

managed to do it verbosely:

          variables:
            theme: states['input_select.theme'].state
            darkmode: >
              states['input_select.theme'].state.includes('ight') ||
              states['input_select.theme'].state.includes('Dark') ||
              states['input_select.theme'].state.includes('Matrix')

As you can see I also defined variable theme, but I can not call that in the variable darkmode, so for now its useless :wink:

Could anyone please help me format the template correctly? thanks!

2

this seems to work:

darkmode: (/ight|Dark|Matrix/).test(states['input_select.theme'].state)

found this at: Better Ways of Comparing a JavaScript String to Multiple Values in one of the comments… older but still useful article :wink:

using the previously created theme variable is probably cleanest, full config:

        - type: custom:config-template-card
          entities:
            - input_select.theme
          variables:
            theme: states['input_select.theme'].state
#            darkmode: >
#              states['input_select.theme'].state.includes('ight') ||
#              states['input_select.theme'].state.includes('Dark') ||
#              states['input_select.theme'].state.includes('Matrix')
#            darkmode: /^(ight|Dark|Matrix)$/.search(states['input_select.theme'].state)
#            darkmode: ${(/ight|Dark|Matrix/).test(theme)}
          card:
            type: custom:auto-entities
            show_empty: false
            filter:
              include:
                - domain: person
                  not:
                    state: home
            card:
              type: map
              hours_to_show: 48
              dark_mode: ${(/ight|Dark|Matrix/).test(theme)} #${darkmode}
              card_mod:
                style: |
                  ha-card {
                    box-shadow: none;
                  }