That's right. I believe what is happening there is that the DIV with the tile-primary class sits inside the larger tile DIV, so the change to the background-color is only being applied to the smaller / inner DIV, not the entire tile.
I found one of the earlier posts from @BrianP that I had in mind, which is very similar to what you started with.
One thing that is missing from this specific post, and I believe is what makes this work, is that you need to set the default colors in the template settings in order for the "style*=..." part to work. My interpretation of why and how this works is that the state of the switch is indicated on the inner DIV I was referring to earlier, through the use of a class on that DIV, but there is no equivalent class added to the tile DIV, so we cannot use that like we would normally. What is happening in @BrianP's solution is the template colors that are set on the outer tile DIV, help to indicate the state of the switch, and this is what is being used in the CSS when changing the tile background color.
For example, you set the "on" color for the template to be rgba(255,0,0,0.8), then in the CSS you use something like:
#tile-1[style*="background-color: rgba(255, 0, 0, 0.8)"] { background-color: rgba(0, 200, 0, 0.67) !important; }
to change the color for on, etc.
I say all of this without having tested it myself yet.... But I'm sure I've used it previously and the approach worked.
