Custom CSS

Choose Edit CSS button to open up user.css file. Find element class name and id in CSS files in @Resources\Extracted folder or enable Developer mode to be able to use DevTool and Inspect Element.

You can use my CSS variables for colors instead of hard coding color value into CSS, so you can publish your Spotify theme and keep it customizable.

var(--modspotify_main_fg)
var(--modspotify_secondary_fg)
var(--modspotify_main_bg)
var(--modspotify_sidebar_and_player_bg)
var(--modspotify_cover_overlay_and_shadow)
var(--modspotify_indicator_fg_and_button_bg)
var(--modspotify_pressing_fg)
var(--modspotify_slider_bg)
var(--modspotify_sidebar_indicator_and_hover_button_bg)
var(--modspotify_scrollbar_fg_and_selected_row_bg)
var(--modspotify_pressing_button_fg)
var(--modspotify_pressing_button_bg)
var(--modspotify_selected_button)
var(--modspotify_miscellaneous_bg)
var(--modspotify_miscellaneous_hover_bg)
var(--modspotify_preserve_1)

Example:

.button.button-green {
	color: var(--modspotify_secondary_fg)
}

This will change buttons text color to Secondary FG color you picked in the skin.

RRR,GGG,BBB format is also supported, use these variables:

var(--modspotify_rgb_main_fg)
var(--modspotify_rgb_secondary_fg)
var(--modspotify_rgb_main_bg)
var(--modspotify_rgb_sidebar_and_player_bg)
var(--modspotify_rgb_cover_overlay_and_shadow)
var(--modspotify_rgb_indicator_fg_and_button_bg)
var(--modspotify_rgb_pressing_fg)
var(--modspotify_rgb_slider_bg)
var(--modspotify_rgb_sidebar_indicator_and_hover_button_bg)
var(--modspotify_rgb_scrollbar_fg_and_selected_row_bg)
var(--modspotify_rgb_pressing_button_fg)
var(--modspotify_rgb_pressing_button_bg)
var(--modspotify_rgb_selected_button)
var(--modspotify_rgb_miscellaneous_bg)
var(--modspotify_rgb_miscellaneous_hover_bg)
var(--modspotify_rgb_preserve_1)

Example:

.SearchInput__input {
	background-color: rgba(var(--modspotify_rgb_slider_bg), 0.5);
}

This will change search input background color to the same color as progress slider background but it has half opacity.