Thanks for this great card!
I just done first tests and identified an issue around the default coloring. I’m using dark theme and the colors of background and font do not have enough contrast. What would be best way to change it? By card-mod or would you add this feature native?
@somansch
What is the name of the playlist that you marked in your screenshot with the red arrow? I would like to search for it and see how it appears on my system. It should not be too hard to add more contrast to the titles.
It’s not about the specific playlist. All search results have the same appearance. Seems to be a styling issue in my CSS. I use “Mac-OS theme” and done some changes around coloring. What colors variables are you using for the background and font of these buttons?
I’ve done some research in dev-tools of the element “button.button”, but can’t find the difference 
.
That’s the result with the default HA-Dark theme:
…and with the MacOS-Dark theme:
@somansch
I just installed the macOS theme, and see the problem.
The text color is the --secondary-text-color value.
The background color is the --rgb-card-background-color value.
.title {
font-size: 0.8rem;
background-color: rgba(var(--rgb-card-background-color), 0.733);
color: var(--secondary-text-color);
font-weight: normal;
}
I am going to adjust the background of the title / sub-title text to use a faded gradient instead of a solid color. I am also going to change the text color to use a variable (e.g. --spc-medialist-items-color: white) for the media items. This value defaults to white, which will contrast better on the gradient background. You can customize the --spc-medialist-items-color by overriding the theme. I am also thinking about a configurable “media list item text color”, so you can set the media list items via configuration settings. That will come later though.
Here’s some preliminary results from testing:
Check out the Overriding Theme forum post on how to add custom theming.
Thanks, this information helps a lot. I’ve setup the additional “rgb-card-background-color” entry in the existing MacOS theme (as it was not defined in this theme yet). Now, I got the contrast for better readibility 
FYI - just released a new version of the SpotifyPlus Card Dashboard
[ 1.0.18 ] - 2024/12/11
playerVolumeControlsHideLevels config option that hides volume level numbers and percentages in the volume controls area of the Player section form. Volume slider control is not affected by this setting.albumFavBrowserItemsLimit config option that specifies the maximum number of items to be returned by the Album Favorites media browser.artistFavBrowserItemsLimit config option that specifies the maximum number of items to be returned by the Artist Favorites media browser.audiobookFavBrowserItemsLimit config option that specifies the maximum number of items to be returned by the Audiobook Favorites media browser.episodeFavBrowserItemsLimit config option that specifies the maximum number of items to be returned by the Episode Favorites media browser.playlistFavBrowserItemsLimit config option that specifies the maximum number of items to be returned by the Playlist Favorites media browser.showFavBrowserItemsLimit config option that specifies the maximum number of items to be returned by the Show Favorites media browser.trackFavBrowserItemsLimit config option that specifies the maximum number of items to be returned by the Track Favorites media browser.userPresets.json file, which will create a user preset for the media item.--spc-card-footer-background-color to set card footer area background color; default value for the player section is vibrant color (based on cover art colors); default value for all other sections is card background color.--spc-card-footer-background-image to set card footer area background image; default value for the player section is a gradient, which provides good contrast; default value for all other sections is card background color.--spc-card-footer-color to set card footer icon foreground color; default value is inherit, which is card foreground color value.@somansch
I added a Themes wiki page to document the various theme variables, as well as provide examples for popular themes. I also added the “macOS” example theme example, which gives you an idea of how to modify a theme for both light and dark modes.
Make sure you update to the latest SpotifyPlus Card and SpotifyPlus Integration versions.
Question: how to play all favorited songs one by one? As you know, there is no playlist to play, as there stored as something called collection…
@mackbeth
Use the Player Media Play Track Favorites service.
You can only play 200 tracks though (Spotify API limitation on the play tracks service).
The desired shuffle mode can also be set before tracks are played.
service: spotifyplus.player_media_play_track_favorites
data:
entity_id: media_player.spotifyplus_john_s
shuffle: true
But from card? any button to do this, any way from GUI?
@thlucas I’m using the Spotify plus in a browser mod popup (I can’t add another view of my panel), I would like to improve the layout:
I’m not sure If it’s possible with card-mod CSS, any advice? Sorry if it’s OT.
- type: 'custom:button-card'
icon: 'mdi:spotify'
color_type: icon
color: green
template:
- button_icon_square_footer
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
size: wide
card_mod:
style: |
ha-dialog {
--mdc-dialog-min-width: 1100px !important;
--mdc-dialog-min-height: 680px !important;
}
.content {
width: auto !important;
height: auto !important;
}
content:
!include button_card_templates/player.yaml
I’m struggling to stretch the height to the size of the popup like for the width, to make the player image bigger. Same happens for the browser sections
@Sofa_Surfer
What do you have specified for the width and height values in your SpotifyPlus Card configuration? Have you tried specifying fill for those values?
If you are using fill, then it’s probably a matter of sizing the ha-dialog parent container element instead of the ha-dialog element itself maybe?
I’m not too familiar with the browser_mod, and it’s been awhile since I played with it.
I know that when I specify the fill values for the width and height that they consume 100% of the horizontal and vertical space on my mobile / tablet devices. I would think the same would apply in the browser_mod popup as well.
That was the silly problem, I “#” while doing some tests. Thank you!
I have some feature request as well, I will post it in the github pull request section
You can hide the devices section in the SpotifyPlus Card. You can then go into the SpotifyPlus integration options and select a default device.
FYI - just released a new version of the SpotifyPlus Card Dashboard
[ 1.0.19 ] - 2024/12/15
PREVIOUS_TRACK control so that if more than 8 seconds have passed the currently playing track is just restarted from the beginning; otherwise, the previous track is selected if progress is past the 8 second point.FYI - just released a new version of the SpotifyPlus Card Dashboard
[ 1.0.20 ] - 2024/12/17
@mackbeth
I added the “Play All Track Favorites” as a new user-preset option type (requires v1.0.22).
userPresets:
- name: My Track Favorites
subtitle: Shuffled
image_url: https://t.scdn.co/images/728ed47fc1674feb95f7ac20236eb6d7.jpeg
shuffle: true
type: trackfavorites
or if you are using JSON file:
{
"name": "My Track Favorites",
"subtitle": "Shuffled",
"image_url": "https://t.scdn.co/images/728ed47fc1674feb95f7ac20236eb6d7.jpeg",
"shuffle": true
"type": "trackfavorites",
}
The “Play All Track Favorites” is also still accessible via the track favorites detail action menu, but I thought this would make it a little bit easier to get to.
Did you ever figure out the limit on the track favorites?
i,
I didn’t noticed update of card… HA didn’t notify me that frontend card should be updated…
As I already replied in Integration forum I think that button in Favorite Tracks section to play ALL of them will be more convinced for user.
As an user, I want to just play my favorite songs - this is just a playlist, and usually when you start listen music you want to play playlist, so I think you can think about adding button to play all tracks - maybe next to refresh button, or wide button below tile and search?
Hello Lucas. First of all “Great work”. Thank you so much!!!
I would like to set up the dashboard for my daughter on a mobile device so that she can only navigate through predefined playlists. She loves LEGO Ninjago. Now there are a lot of albums. Is it possible to create a Ninjago superfolder with a selection of albums underneath (subfolder). Then I could, for example, design it so that I have a parent tile for everything she likes to listen to with a selection of albums underneath. Is that possible? I haven’t found a way yet. Thanks and best regards