Themes - thlucas1/spotifyplus_card GitHub Wiki
Theme variables control the overall look and feel of the card. You can easily change text colors, font sizes, media control button sizes, etc using these variables.
Themes can be applied to the card in the following ways:
Card Configuration Options
Theming can be applied using card configuration options. Any theme changes applied using this method are for the specific card instance where they are applied - they will not affect other card instances. You can also use Theme File Variables to apply themes to ALL card instances if you wish.
There is no card configuration editor UI to set theme options due to the large number of options; they must be manually defined in the card configuration editor via the Show Code Editor button.
Use the Theme Variables Index below to find the section that you want to style. The index documents both the theme file variable name and the card configuration option name.
For example if you wanted to change the text color to red in the each of the media browser sections, add the following card configuration option value via the card configuration editor (using Show Code Editor):
mediaBrowserItemsColor: red
or change it to an html color code value:
mediaBrowserItemsColor: "#ff5733"
or change it to an RGB color code value:
mediaBrowserItemsColor: rgb(255, 87, 51)
How it Looks
Theme File Variables
Theming can be applied using Home Assistant theme file variables. Any theme changes applied using this method apply to ALL card instances. You can also use Card Configuration Options to apply themes to individual card instances if you wish.
Use the Theme Variables Index below to find the section that you want to style. The index documents both the theme file variable name and the card configuration option name.
Use the Theme Files Index below to find popular Home Assistant theme files that can be updated.
For example if you wanted to change the text color to red in the each of the media browser sections for both light and dark mode, add the following options to your selected theme file:
modes:
light:
# -------------------------------------------------------------------------------
# SpotifyPlus Card theme customizations (light).
# -------------------------------------------------------------------------------
# Media Browser Sections:
spc-media-browser-items-color: red
#
dark:
# -------------------------------------------------------------------------------
# SpotifyPlus Card theme customizations (dark).
# -------------------------------------------------------------------------------
# Media Browser Sections:
spc-media-browser-items-color: red
Theme Variables Index
Use the following index to locate the specific card section you would like to theme:
Theme Variables - Card (in general)
| Config Option | Theme File Variable | Description |
|---|---|---|
cardWaitProgressSliderColor |
spc-card-wait-progress-slider-color |
Color of the card area wait progress indicator (default #2196F3). |
cardContentSectionMargin |
spc-card-content-margin |
Card content section margin value (default 0.0rem). |
Theme Variables - Card Footer Area
| Config Option | Theme File Variable | Description |
|---|---|---|
footerBackgroundColor |
spc-footer-background-color |
Card footer area background color; default value is vibrant color, which is set based upon cover art colors. |
footerBackgroundImage |
spc-footer-background-image |
Card footer area background image; default value is a gradient, which provides good contrast. |
footerIconSize |
spc-footer-icon-size |
Size of the card footer area icons (default 1.75rem) |
footerIconColor |
spc-footer-icon-color |
Card footer area icons color (default inherit) |
footerIconColorSelected |
spc-footer-icon-color-selected |
Card footer area selected icon color (default --dark-primary-color) |
Theme Variables - Media Browser Sections
| Config Option | Theme File Variable | Description |
|---|---|---|
mediaBrowserSectionTitleFontSize |
spc-media-browser-section-title-font-size |
Media browser section title text font-size (default 1.0rem). |
mediaBrowserSectionSubTitleFontSize |
spc-media-browser-section-subtitle-font-size |
Media browser section sub-title text font-size (default 0.85rem). |
mediaBrowserItemsSvgIconColor |
spc-media-browser-items-svgicon-color |
Media browser svg icon items color (default #ffffff). |
mediaBrowserItemsColor |
spc-media-browser-items-color |
Media browser items title and sub-title text colors (default #ffffff). |
mediaBrowserItemsListColor |
spc-media-browser-items-list-color |
Media browser items title and sub-title text colors when list is configured for non-icon format (default #2196F3). |
mediaBrowserItemsTitleFontSize |
spc-media-browser-items-title-font-size |
Media browser items title text font-size (default 0.8rem). |
mediaBrowserItemsSubTitleFontSize |
spc-media-browser-items-subtitle-font-size |
Media browser items sub-title text font-size (default 0.8rem). |
Theme Variables - Player Section
| Config Option | Theme File Variable | Description |
|---|---|---|
customImageUrls: playerOffBackground |
spc-player-background-image-off |
Background image to use for the player section when the player state is off; default value is none. |
customImageUrls: playerIdleBackground |
spc-player-background-image-idle |
Background image to use for the player section when the player state is idle; default value is none. |
customImageUrls: playerBackground |
spc-player-background-image |
Background image to use for the player section when the player state is playing; default value is to use currently playing content cover art. |
playerBackgroundImageSize |
spc-player-background-size |
Size of the player background image; default value is 100% 100%. Other possible values: contain, cover. |
playerControlsBackgroundColor |
spc-player-controls-bg-color |
Gradient color of the player media controls background (default #0000bb). |
playerControlsColor |
spc-player-controls-color |
Color of the player media control labels (default #ffffff). |
playerControlsIconColor |
spc-player-controls-icon-color |
Color of the player media control icons (default #ffffff). |
playerControlsIconSize |
spc-player-controls-icon-size |
Size of the player media control icons (default 2.0rem). |
playerControlsIconJustifyContent |
spc-player-controls-icon-justify-content |
Justify content value of the player media control icons (default is 'center'). Examples: left, center, right, space-around, space-between, space-evenly, etc. |
playerControlsIconToggleColor |
spc-player-controls-icon-toggle-color |
Color of the player media control icons when they are toggled (default #2196F3). |
playerControlsMaxWidth |
spc-player-controls-max-width |
Max width value of player control areas (progress, transport deck, and volume details) (default 40rem). |
playerHeaderBackgroundColor |
spc-player-header-bg-color |
Gradient color of the player header background (default #0000bb). |
playerHeaderTitle1Color |
spc-player-header-title1-color |
Player header title 1 text color (default #ffffff). |
playerHeaderTitle1FontSize |
spc-player-header-title1-font-size |
Player header title 1 text font-size (default 1.0rem). |
playerHeaderTitle2Color |
spc-player-header-title2-color |
Player header title 2 text color (default #ffffff). |
playerHeaderTitle2FontSize |
spc-player-header-title2-font-size |
Player header title 2 text font-size (default 1.15rem). |
playerHeaderTitle3Color |
spc-player-header-title3-color |
Player header title 3 text color (default #ffffff). |
playerHeaderTitle3FontSize |
spc-player-header-title3-font-size |
Player header title 3 text font-size (default 1.0rem). |
playerMinimizedTitleColor |
spc-player-minimized-title-color |
Player minimized title text color (default #ffffff). |
playerMinimizedTitleFontSize |
spc-player-minimized-title-font-size |
Player minimized title text font-size (default 1.0rem). |
playerProgressLabelColor |
spc-player-progress-label-color |
Color of the player progress text labels (default #ffffff). |
playerProgressLabelFontSize |
spc-player-progress-label-font-size |
Font size of the player progress text labels (default x-small). |
playerProgressLabelPaddingLR |
spc-player-progress-label-padding-lr |
Horizontal padding value of the player progress text labels (default is 0rem). |
playerProgressSliderColor |
spc-player-progress-slider-color |
Color of the player progress slider bar (default #2196F3). |
playerVolumeLabelColor |
spc-player-volume-label-color |
Color of the player volume text labels (default #ffffff). |
playerVolumeLabelFontSize |
spc-player-volume-label-font-size |
Font size of the player volume text labels (default x-small). |
playerVolumeSliderColor |
spc-player-volume-slider-color |
Color of the player volume slider bar (default #2196F3). |
playerVolumeSliderThickness |
spc-player-volume-slider-thickness |
Thickness of the player volume slider bar (default 1rem). |
Theme Files Index
The following are provided for popular user-defined themes. Just add the contents to the appropriate theme file in the Home Assistant confguration themes folder.
Theme File - macOS
# Theme based on the macOS light and dark mode UI
# Creator: Juan - @juanmtech
# Website: https://www.juanmtech.com
# YouTube Channel: https://youtube.com/juanmtech
modes:
light:
# -------------------------------------------------------------------------------
# SpotifyPlus Card theme customizations (light).
# -------------------------------------------------------------------------------
# Card Footer:
# comment out footer-background values to use vibrant auto-generated background color for player section:
#spc-footer-background-color: var(--card-background-color)
#spc-footer-background-image: var(--card-background-color)
spc-footer-icon-color: inherit
spc-footer-icon-color-selected: rgb(33, 150, 243)
spc-footer-icon-size: 1.75rem
# Media Browser Items:
spc-media-browser-section-title-font-size: 1.0rem
spc-media-browser-section-subtitle-font-size: 0.85rem
spc-media-browser-items-svgicon-color: rgb(33, 150, 243)
spc-media-browser-items-color: var(--primary-text-color)
spc-media-browser-items-title-font-size: 1.0rem
spc-media-browser-items-subtitle-font-size: 0.8rem
# Player Section:
#spc-player-background-image-off: url(/local/spotifyplus/customimages/playerOffIdleBackground04.png)
#spc-player-background-image-idle: url(/local/spotifyplus/customimages/playerOffIdleBackground05.png)
#spc-player-background-image: url(/local/spotifyplus/customimages/playerOffIdleBackground06.png)
#spc-player-background-size: contain
spc-player-header-title1-color: white
spc-player-header-title1-font-size: 1.0rem
spc-player-header-title2-color: white
spc-player-header-title2-font-size: 1.2rem
spc-player-header-title3-color: white
spc-player-header-title3-font-size: 1.0rem
spc-player-controls-color: white
spc-player-controls-icon-color: white
spc-player-controls-icon-toggle-color: rgb(33, 150, 243)
#
dark:
# -------------------------------------------------------------------------------
# SpotifyPlus Card theme customizations (dark).
# -------------------------------------------------------------------------------
# Card Footer:
# comment out footer-background values to use vibrant auto-generated background color for player section:
#spc-footer-background-color: var(--card-background-color)
#spc-footer-background-image: var(--card-background-color)
spc-footer-icon-color: inherit
spc-footer-icon-color-selected: rgb(33, 150, 243)
spc-footer-icon-size: 1.75rem
# Media Browser Items:
spc-media-browser-section-title-font-size: 1.0rem
spc-media-browser-section-subtitle-font-size: 0.85rem
spc-media-browser-items-svgicon-color: rgb(33, 150, 243)
spc-media-browser-items-color: var(--primary-text-color)
spc-media-browser-items-title-font-size: 1.0rem
spc-media-browser-items-subtitle-font-size: 0.8rem
# Player Section:
#spc-player-background-image-off: url(/local/spotifyplus/customimages/playerOffIdleBackground07.png)
#spc-player-background-image-idle: url(/local/spotifyplus/customimages/playerOffIdleBackground08.png)
#spc-player-background-image: url(/local/spotifyplus/customimages/playerOffIdleBackground09.png)
#spc-player-background-size: contain
spc-player-header-title1-color: white
spc-player-header-title1-font-size: 1.0rem
spc-player-header-title2-color: white
spc-player-header-title2-font-size: 1.2rem
spc-player-header-title3-color: white
spc-player-header-title3-font-size: 1.0rem
spc-player-controls-color: white
spc-player-controls-icon-color: white
spc-player-controls-icon-toggle-color: rgb(33, 150, 243)