Spotify Light Theme

Although most of the Spotify users in the idea center have asked to add a light theme to Spotify, but so far the color of this app is still dark. With the description of this repository, you can add a light theme or any type of theme to the web version of this famous application. You can even create your own custom spotify theme by changing a few color variables. Let's do it.

Table of Contents

Features
How to use?
How to customize?
Themes
Screenshots

Features

Several themes for Spotify including light themes
Just with pure CSS and without changing the structure of Spotify
Easy customization with support for CSS variables
The ability to create your own custom theme just by changing a few color variables.

How to use?

First, you need to install a browser extension in order to inject CSS to the site you visit.

you can use User JavaScript and CSS extension for Google Chrome. Download and install here.
For other browsers, you can download and install the appropriate extension from the table below.

Browser	Extension		Browser	Extension
	User JavaScript and CSS Code Injector			Code Injector
	Code Injector			Tamperish / document

Then open the Spotify website and click on the extension and click Add New button.

Now, in the CSS section, you should copy or import the theme css code.

Go to the theme folder and choose your theme themes/CHOOSE_THEME and copy its css codes here and click on yellow save button.

If you want to get repository updates automatically, you can use Jsdelivr CDN to load theme CSS file with this structure:

@import "https://cdn.jsdelivr.net/gh/najafi-saeed/spotify-theme/themes/theme-folder/theme-file.min.css";

for example you can copy:

@import "https://cdn.jsdelivr.net/gh/najafi-saeed/spotify-theme/themes/light-theme/light-theme.min.css";

Refresh Spotify site and enjoy your new theme.

How to customize?

You can easily customize a theme by overwriting some CSS variables.

All CSS variables are listed here. You just need to copy them at the end of your file. Of course, if you master CSS, you can make more specialized changes.

:root {
  --background-color: #fff;
  --text-color: #333;
  --text-color-muted: #999;
  --border-color: #e5e5e5;
  --primary-color: #19ce5c;
  --primary-color-hover: #0dab47;
  --muted-color: #f5f5f5;
  --muted-color-hover: #caffde;
  /* sections */
  --topbar-background: rgba(255, 255, 255, 0.7);
  --topbar-blur: 10px;
  --home-hero-background: linear-gradient(rgba(255, 255, 255, .7) 0, var(--muted-color-hover) 80%);
  --leftbar-background: var(--muted-color);
  --playingbar-background: rgba(25,206,92, 0.85);
  --playingbar-blur: 5px;
  --playlist-hero-gradient:   rgba(255, 255, 255, 0.7);
  --playlist-hero-gradient-2: rgba(255, 255, 255, 0.6);
  /* buttons */
  --primary-button-background:       var(--primary-color);
  --primary-button-background-hover: var(--primary-color-hover);
  --primary-button-text:       #fff;
  --primary-button-text-hover: #fff;
  --primary-button-border:        0px solid var(--primary-button-background);
  --primary-button-border-hover:  0px solid var(--primary-button-background-hover);

  --secondary-button-background:        rgba(0, 0, 0, 0.35);
  --secondary-button-background-hover:  rgba(0, 0, 0, 0.7);
  --secondary-button-text:        #fff;
  --secondary-button-text-hover:  #fff;
  --secondary-button-border:        0px solid var(--secondary-button-background);
  --secondary-button-border-hover:  0px solid var(--secondary-button-background);
  /* scrollbar */
  --scrollbar-track-color: #eee;
  --scrollbar-handle-color: #c7c7c7;
  --scrollbar-handle-active-color: #999;
}