Dashboard: Sonos card

Share your Projects! Dashboards & Frontend
102

Have you tried setting the theme var --sonos-title-color ? (GitHub - johanfrick/custom-sonos-card: Home Assistant custom lovelace sonos card)

103

no, cause its only in sonos, there should be an option to manage it there

104

I tried using card-mod styling, and put in lovelace the following:

        style: |
          ha-card {
            --sonos-border-radius: 0.5rem;
          }

But nothing change…
I am not using a custom theme and i don’t know really where to put those variables…

105

How would you want it to look? Some ideas:
image
image

106

I’m in favor of putting a background behind it like you’ve done with media in this picture. I would probably make the background/font color match the rest of the theme on the sonos card.

This aligns with the best way I could think to resolve the visual impairment. This forces them to stand out against an astatic bqckground.

1 Like
107

You don’t need a custom theme. Just create a theme.yaml with the sonos theme vars.

1 Like
108

Looking through this thread… Some really cool example (in picture format). When I tried on my sonos speaker, I get this weird formating (no favs, etc).
image

Does anyone have an example YAML?

109

Check the github readme :slight_smile:
…or the initial post

110

@PunxsutawneyPhil - I have looked through, doesnt seem to take the settings (like the dark mode or the alt background) - i.e.

sonos-background-color: var(–secondary-background-color)
sonos-artist-album-text-color: rgb(198, 203, 210)
sonos-title-color: rgb(198, 203, 210)
sonos-color: rgb(198, 203, 210)
sonos-player-section-background: rgb(32, 33, 36)
sonos-accent-color: rgb(198, 203, 210)

111

My card here…. type: custom:custom-sonos-card
name: ‘’
groupsTitle: ‘’
groupingTitle: ‘’
favoritesTitle: ‘’
headerImage: ‘’
shuffleFavorites: false
noMediaText: No media selected
allVolumesText: All volumes
entityNameRegexToReplace: 'SONOS ’
entityNameReplacement: ‘’
layout:
mobileThresholdPx: 500
groups:
width: 20%
mobileWidth: 80%
players:
width: 20%
mobileWidth: 80%
favorites:
width: 20%
mobileWidth: 80%
favorite:
width: 20%
mobileWidth: 25%
sonos-background-color: var(–secondary-background-color)
sonos-artist-album-text-color: rgb(198, 203, 210)
sonos-title-color: rgb(0, 0, 0)
sonos-color: rgb(198, 203, 210)
sonos-player-section-background: rgb(32, 33, 36)
sonos-accent-color: rgb(198, 203, 210)

image
image1129×500 61.4 KB

What am I missing to get the theme/colours?

112
113

What about the images? Is that also from the themes.yaml config? i.e. below

I would just take that setup tbh, it looks great. Do you still have the same?

image
image1644×1180 185 KB

114

Use the clear theme and then add this to the theme file:
lovelace-background: center / cover no-repeat fixed url('URL_TO_IMAGE')
Here is the image I use (from the beach down where we live):

image
image1452×1089 146 KB

1 Like
115

You lucky man! :slight_smile:

1 Like
116

This is how i solved:

  1. Create a theme called sonos.yaml and put inside all the variables offered by the card and configured by your desire.
  2. Put in the view option in lovelace.yaml the following:
theme: sonos

And that’s all.

1 Like
117

:clap: well done

118

Works a treat! Thanks @PunxsutawneyPhil

1 Like
119

A couple of questions/observations that I’d like to understand better…

  1. When does the card “requery” for Sonos information?
    I had a player unplugged for awhile, and the card correctly was no longer showing it. However, it’s been plugged back in for probably 24 hours now, and other media-player type cards are able to see it, but it’s still not showing in this Sonos card. I’ve upgraded the card with the new version this morning, and HA has been restarted a few times since then, but the player still isn’t there.

B. An observation, really, that I may or may not be able to reproduce.
My LivingRoom Sonos device was the ‘master’ that I was joining other devices to, playing around
with this card. I moved the LivingRoom Sonos, left it unplugged for awhile (see #1 above) and this
Sonos card no longer showed my favorites. I went into the official Sonos app and started playing a
different Sonos, grouping/ungrouping, etc. and once I restarted HA, this Sonos card was now
showing my favorites again.

120

The card updates whenever something changes for any player. I am not sure it is possible to handle the scenario you mention. Maybe it is, but then I am not aware of it I am afraid.

121

Agree with @Sergeantpup - I like the background behind those specific text fields just to separate the text from a complicated or low contrast background.

1 Like