Dashboard: Sonos card

Do I need to specify the favorites in the yaml config, or should it be automatically imported from the player source list?, currently there is no favorites listed.

type: custom:custom-sonos-card
name: ''
groupsTitle: Speakers
groupingTitle: ''
favoritesTitle: Favorites
headerImage: ''
shuffleFavorites: false
noMediaText: No media selected
allVolumesText: All volumes
entityNameRegexToReplace: 'SONOS '
entityNameReplacement: ''

No, that is automatically imported. Please supply some more info: https://github.com/johanfrick/custom-sonos-card/issues/new?assignees=&labels=bug&template=bug_report.md&title=

But I am using the default theme. How to use and where to put that variable?

1 Like

I just wanted to say I absolutely love this card and want to thank you for all your work. It is impressive how well it works. Just a random question, do you have plans to add the queue to the card? Like the ability to see what songs are up next and maybe select them? Just curious. Either way great work. Thank you!

2 Likes

Thanks!
As far as I know it’s not supported in home assistant :disappointed:

Ohh got it…no biggie just wondering. Again thanks for what you have done with this. It’s great!

Still having problems trying use those variables to theme the default theme i am using.
Can you supply some pratical examples about it?

@BeastHouse @Sergeantpup
Anyone of you can share? Looks like you are doing theming.

1 Like

I had to do a couple things to get it where it’s readable and not blinding.

I use a theme:


I did not like the way it displayed the cards on lovelace so I learned how to up the opacity

If you go into the file for your theme and just search ‘rgba’, you’ll find all the results that deal with it, I just looked for the one on cards and ramped it up. The last number is the opacity; .9 represents 90% opacity.


When I did this, it changed all my cards but NOT the sonos page, but now that I was armed with this information, I could easily find what I needed in the sonos card file to ramp up the opacity there; the difference is opacity is spelled out:

THIS is the setting that I think eventually fixed everything to where I could read it by cranking the opacity up to 100 or 1:

I’m sure there’s proper ways to do this but this definitely met my needs without messing up other stuff.

1 Like

I do not believe the defaul theme can be edited other than the basic light v dark in the user settings.

I added the following lines to my themes yaml file, in this case, the google dark theme.

  # Sonos
  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)

This results in the card looking like this.

Thanks @BeastHouse
We’re a bit off topic now, since this is not specific for the Sonos card but very generic thing about how to set theme variables in home assistant.

Here’s a good guide that I’ve used in the past How to set up themes in home assistant | JuanMTech which does not require you to use another theme as a start.

Hopefully we can stop the discussion on how to set theme variables now @maurizio53 , and focus on improving the Sonos Card? :slightly_smiling_face:

1 Like

Fixed with latest update, thanks.

1 Like

Looks great btw, @BeastHouse ! Ok if I share it in Readme?

Absolutely, heres another shot after I played around with sizing.

Awesome! Share your config so I can add it too :slightly_smiling_face:

For you, or anyone else, feel free to contribute in GitHub directly if you want :hugs:

1 Like
type: custom:custom-sonos-card
name: ''
groupsTitle: Devices
groupingTitle: ''
favoritesTitle: ' Favorites'
headerImage: ''
shuffleFavorites: false
noMediaText: No media selected
allVolumesText: All volumes
entityNameRegex: /SONOS //
entities:
  - media_player.family_room
  - media_player.rumpus_room
theme: Google Dark Theme
layout:
  mobileThresholdPx: 500
  groups:
    width: 25%
    mobileWidth: 80%
  players:
    width: 35%
    mobileWidth: 80%
  favorites:
    width: 25%
    mobileWidth: 80%
  favorite:
    width: 25%
    mobileWidth: 25%

And the theme config if you wanted…

  # Sonos
  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)
2 Likes

Did anyone managed to display the songlist by pressing your playlist ?

Can you explain me what the --sonos-favorites-multiline variable does? I tried wrap and nowrap but nothing changes…
And more there is a way to make texts in the devices section and in the titles of favourites a little bigger?