Play/Stop Button Element colors

In Canvas, I want a single play/stop button that changes background colour depending on whether transport is playing or stopped. I can see is-playing on the body tag and it works as a CSS selector, but body.is-playing #el-xxx button { background: green } doesn’t work because the background is set via an inline --default-background CSS variable that overrides it. What’s the correct way to change a Canvas button’s background colour based on playback state?

Hey @alistaton, you can set the color of a button dynamically using templates. To do this, enable the “Dynamic” toggle in the background color settings and then enter a template like ${osc("/global/isPlaying") ? "green-800" : "red-800"}

Check out the available element presets for some inspiration on how to use templates for button colors :slight_smile:

Thanks Léo, that’s great!

:oncoming_fist: