Themes
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:
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
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
Use the following index to locate the specific card section you would like to theme:
| Config Option | Theme File Variable | Description |
|---|---|---|
cardWaitProgressSliderColor |
spc-card-wait-progress-slider-color |
Color of the card area wait progress indicator (default #2196F3). |
| Config Option | Theme File Variable | Description |
|---|---|---|
| n/a | spc-card-footer-background-color |
Card footer area background color; default value is vibrant color, which is set based upon cover art colors. |
| n/a | spc-card-footer-background-image |
Card footer area background image; default value is a gradient, which provides good contrast. |
| n/a | spc-card-footer-color |
Card footer icon foreground color; default value is inherit, which is card foreground color value. |
| 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). |
| Config Option | Theme File Variable | Description |
|---|---|---|
playerBackgroundImageSize |
spc-player-background-size |
Size of the player background image; default value is 100% 100%. Other possible values: contain, cover. |
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). |
playerControlsIconToggleColor |
spc-player-controls-icon-toggle-color |
Color of the player media control icons when they are toggled (default #2196F3). |
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). |
playerProgressLabelColor |
spc-player-progress-label-color |
Color of the player progress text labels (default #ffffff). |
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). |
playerVolumeSliderColor |
spc-player-volume-slider-color |
Color of the player volume slider bar (default #2196F3). |
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 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 the following to use vibrant auto-generated background color:
#spc-card-footer-background-color: var(--card-background-color)
#spc-card-footer-background-image: var(--card-background-color)
#spc-card-footer-color: white
# 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-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 the following to use vibrant auto-generated background color:
#spc-card-footer-background-color: var(--card-background-color)
#spc-card-footer-background-image: var(--card-background-color)
#spc-card-footer-color: var(--primary-text-color)
# 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-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)