More button-card than Mushroom but still thought I’d share here: a minimalistic card for controlling Chromecast with Google TV (kind of like the remote that comes with it), using the Android TV Remote integration. On that page they show a dashboard example, but I thought it looked terrible. I prefer my iteration 
The logos in the bottom row are shortcuts to open apps, and will highlight when the app is currently active. To add your own shortcuts to open apps, have a look at this thread.
Code
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-entity-card
name: Chromecast 4K • Remote
icon: mdi:remote-tv
entity: remote.chromecast_4k
tap_action:
action: more-info
icon_color: red
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:button-card
icon: mdi:arrow-left-bottom
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: BACK
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 20px
view_layout:
grid-area: item1
- type: custom:button-card
icon: mdi:arrow-up
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_UP
hold_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_UP
num_repeats: 1
delay_secs: 0.5
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 20px
view_layout:
grid-area: item2
- type: custom:button-card
icon: mdi:home
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: HOME
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 20px
view_layout:
grid-area: item3
- type: custom:button-card
icon: mdi:arrow-left
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_LEFT
hold_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_LEFT
num_repeats: 1
delay_secs: 0.5
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 20px
view_layout:
grid-area: item4
- type: custom:button-card
icon: mdi:cursor-pointer
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_CENTER
hold_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_CENTER
num_repeats: 1
delay_secs: 0.5
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 20px
view_layout:
grid-area: item5
- type: custom:button-card
icon: mdi:arrow-right
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_RIGHT
hold_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_RIGHT
num_repeats: 1
delay_secs: 0.5
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 20px
view_layout:
grid-area: item6
- type: custom:button-card
entity: media_player.tv
icon: |
[[[ if (entity.attributes.is_volume_muted) {
return 'mdi:volume-off'
} else {
return 'mdi:volume-high'
}
]]]
tap_action:
action: call-service
service: script.samsung_tv_volume_mute
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 20px
view_layout:
grid-area: item7
- type: custom:button-card
icon: mdi:arrow-down
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_DOWN
hold_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_DOWN
num_repeats: 1
delay_secs: 0.5
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 20px
view_layout:
grid-area: item8
- type: custom:button-card
entity: remote.chromecast_4k
icon: mdi:youtube
tap_action:
action: call-service
service: remote.turn_on
service_data:
entity_id: remote.chromecast_4k
activity: https://www.youtube.com
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: |
[[[ if (entity.attributes.current_activity == 'com.youtube') {
return 'rgba(var(--mush-rgb-red),0.3)'
} else {
return 'rgba(var(--cstm-rgb-on-secondary),0.05)'
} ]]]
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--mush-rgb-red),0.9)
size: 20px
view_layout:
grid-area: item9
- type: custom:button-card
entity: remote.chromecast_4k
icon: mdi:netflix
tap_action:
action: call-service
service: remote.turn_on
service_data:
entity_id: remote.chromecast_4k
activity: netflix://
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: >
[[[ if (entity.attributes.current_activity ==
'com.netflix.ninja') {
return 'rgba(var(--mush-rgb-red),0.3)'
} else {
return 'rgba(var(--cstm-rgb-on-secondary),0.05)'
} ]]]
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--mush-rgb-red),0.9)
size: 20px
view_layout:
grid-area: item10
- type: custom:button-card
entity: remote.chromecast_4k
entity_picture: https://upload.wikimedia.org/wikipedia/commons/a/ad/AppleTVLogo.svg
show_entity_picture: true
tap_action:
action: call-service
service: remote.turn_on
service_data:
entity_id: remote.chromecast_4k
activity: https://tv.apple.com
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: >
[[[ if (entity.attributes.current_activity ==
'com.apple.atve.androidtv.appletv') {
return 'rgba(var(--cstm-rgb-on-secondary),0.2)'
} else {
return 'rgba(var(--cstm-rgb-on-secondary),0.05)'
} ]]]
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 22px
view_layout:
grid-area: item11
- type: custom:button-card
entity: remote.chromecast_4k
icon: mdi:spotify
tap_action:
action: call-service
service: remote.turn_on
service_data:
entity_id: remote.chromecast_4k
activity: spotify://
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: >
[[[ if (entity.attributes.current_activity ==
'com.spotify.tv.android') {
return 'rgba(var(--mush-rgb-green),0.2)'
} else {
return 'rgba(var(--cstm-rgb-on-secondary),0.05)'
} ]]]
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--mush-rgb-green),0.9)
size: 20px
view_layout:
grid-area: item12
layout:
grid-template-columns: 1fr 1fr 1fr 1fr
grid-template-rows: min-content
grid-template-areas: |
". item2 . item1"
"item4 item5 item6 item3"
". item8 . item7"
"item9 item10 item11 item12"
gap: 0px
margin: '-4px 8px 4px'
You’ll see I use a custom variable, var(--cstm-rgb-on-secondary). You can set it in your theme:
mode:
light:
cstm-rgb-on-secondary: 51, 51, 51
dark:
cstm-rgb-on-secondary: 221, 221, 221