I was just coming back here to say that I think it is because I am using a template for the entity. Frankly, I guess it does not make sense to use a variable for entity or name.
Seems that using a templates causes some problems with state colors overall. When I navigate away from the tab the come back, the card color is gone until I click on the button again. Going to keep playing around with it
Ok, Iām really puzzled now. 
Iāve stood up a brand new Docker container running āhomeassistant/home-assistant:0.115.6ā on a different computer (Docker Desktop for Mac). I installed HACS and added the button-card (3.3.6). Enabled YAML mode and created a new ui-lovelace.yaml file. Set up two dummy input_booleans and copied over the same button card code.
But, the OR method still doesnāt workā¦
I donāt think Iām doing anything wrong with my config because itās a fresh Home Assistant with only two dummy entities? 
Iāve tried different browsers on MacOS and Windows.
Any ideas? 
My code is as follows:
ui-lovelace.yaml
title: Home
views:
- path: default_view
title: Home
cards:
- type: entities
title: Booleans
show_header_toggle: false
entities:
- entity: input_boolean.dummy_one
- entity: input_boolean.dummy_two
- type: custom:button-card
entity: input_boolean.dummy_two
show_state: true
show_icon: false
name: Test
styles:
card:
- border-radius: 15px
- border: 'solid 1.5px rgb(0,0,0)'
- font-size: 17px
- width: 200px
- padding: 4%
- box-shadow: |
[[[
return ( states['input_boolean.dummy_one'].state == 'off' )
? '0px 0px 5px grey' : '0px 0px 5px red';
]]]
name:
- color: |
[[[
return ( states['input_boolean.dummy_one'].state == 'off' ||
states['input_boolean.dummy_two'].state == 'off' )
? 'green' : 'red';
]]]
configuration.yaml
default_config:
input_boolean:
dummy_one:
name: Dummy 1
initial: false
dummy_two:
name: Dummy 2
initial: false
lovelace:
mode: yaml
resources:
- url: /hacsfiles/button-card/button-card.js
type: module
Thatās all there is to my config.
Hi, I created my own navigation menu:
Is it possible now, to catch the active view index in order to set the color of the just tabbed button?
sorry, but I canāt get it to work.
I placed the template here:
background: var(--background-image)
title: Varadero
button_card_templates:
- button_shortcut_menu:
variables:
dashboard: |
[[[ return window.location.pathname.split('/')[1] ]]]
view: |
[[[ return window.location.pathname.split('/').slice(-1) ]]]
size: 25px
styles:
icon:
- color: var(--secondary-text-color)
card:
- box-shadow: none
- background: |
[[[ return variables.view == variables.path
? 'var(--secondary-background-color)' : 'var(--card-background-color)';
]]]
views:
- badges:
But it is not available in the button-card.
Maybe wrong place in yaml?
what isnt available?
also did you add the variables dashboard and view in the button-card itself, as in my example? (btw, if you donāt use dashboards, you can leave out that bit, makes it just a bit simpler.)
and, of course, if you use that code, you need the color variables too in your current theme.
Thanks, I figured it out.
How many lines of code and copy and paste could I have saved knowing earlier about the templates :- 
Did not study the docs attentive enough
yep, heavy user here, slightly responsible for the options available by keeping bugging Romrider about adding templatesā¦ 
couldnāt live without them
It exactly does what it says: if any of your dummy input boolean are off, it will be green, so for it to become red, both of them should be on. Iām not sure I understand what you are trying to achieve 
so now I am lost myselfā¦is there any reason this wont work:
styles:
icon:
- color: >
[[[ if (states[variables.switch].state == 'off' &&
states[variables.sensor].state != 0) return 'red';
return 'var(--text-color-on)';
]]]
or
styles:
icon:
- color: >
[[[ return states[variables.switch].state == 'off' &&
states[variables.sensor].state != 0
? 'red' : 'var(--text-color-on)';
]]]
keeps bugging me about a missing ā:ā but I cant see whereā¦
so silly, it was an indent on the color template:
icon:
- color: >
[[[ return states[variables.switch].state == 'off' &&
states[variables.sensor].state != 0 ? 'red' : 'var(--text-color-on)';
]]]
works just as I had hoped to would. sorry.
Am I correct that this only works when Lovelace has been switched to YAML mode?
I am using the Lovelace UI editor. To access the full config I open raw config editor from the UI. But all my trials to !include in this editor throw a parser error at me when I try to save:
YAML kann nicht geparsed werden: YAMLException: unknown tag !<!include> at line 1, column 42: ... rd_templates: !include file.yaml ^
I there any way to !include in UI editor mode?
You cannot use !include in UI editor mode, but you might be able to put the template in the top of your raw config. I am doing that now with mixed success and am hoping that someone can comment on if this is fully supported.
My template at the top of my config as shown here makes a card appear and makes the popup appear, but the title is showing as '[[[ return entity.attributes.friendly_name ]]]' instead of the friendly name, and not quite working right. Itās like the template itself works, but templates within it do not.
It is supported in the RAW config editor exactly like you do it.
Your configuration looks okay so it should work like this. Are you using the latest version of button-card? Please check the javascript console to verify your version.
I am using HACS which indicates that itās up to date. The resources page in config doesnāt seem to indicate version?
Thank you for the reply, and your card is amazing! Iām trying to use it to imitate just a portion of Mattias perssonās glorious config.
The version is indicated in the javascript console of your browser (Finding Your Browser's Developer Console | Balsamiq)
It should display something like this (with the version you have installed, latest stable being 3.3.6):
Itās current! Thank you again for the card and any input to my problem.
Edit: Iām seeing the same behavior on the android app. I also tried hard coding the entity in the popup template, and that worked, just to make sure that my card template could properly launch a popup with a slider.
I also had some problems with the JS strings in the button_card_templates.
I could solve them through a multiline formatting:
name: >
[[[
return entity.state;
]]]
Thanks for all your help and thanks @RomRider for this incredibly versatile card.
Iāve tried multi-line to no avail
(Also, my > turn into | for some reason, but RobC on the discord kindly verified for me that they are treated the same in his button card template.)
button_card_templates:
base:
aspect_ratio: 1/1
show_state: true
show_icon: false
tap_action:
action: toggle
haptic: light
light:
template:
- base
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: |
[[[
return entity.attributes.friendly_name;
]]]
deviceID: this
card:
type: 'custom:light-popup-card'
entity: |
[[[
return entity.entity;
]]]
icon: none
fullscreen: false
brightnessWidth: 130px
brightnessHeight: 360px
borderRadius: 1.7em
sliderColor: '#FF0'
thought this worked (but it probably was some cache flukeā¦):
icon: >
[[[ return (window.location.pathname.split('/')[2] == 'alarmclock')
? 'mdi:alarm-note' :
return (states['sensor.next_alarm'].state == 'Not set')
? 'mdi:alarm-off' : 'mdi:alarm'; ]]]
I figure it would be possible to optimize this in JS? this is some sort of nested ternary operator, developed from an earlier one, hence the somewhat forced construction
original was:
icon: >
[[[
return (states['sensor.next_alarm'].state == 'Not set')
? 'mdi:alarm-off' : 'mdi:alarm';
]]]
to which I had to add the path .
cant find another way to write this than:
icon: >
[[[ if (window.location.pathname.split('/')[2] == 'alarmclock') return 'mdi:alarm-note';
if (states['sensor.next_alarm'].state == 'Not set')return 'mdi:alarm-off';
return 'mdi:alarm'; ]]]
which is fine of course, just trying to learn better JS here.
please have a look? thanks!