Spotify has released a new design for their desktop application in mid-2023 yet again. Some hate it, some love it. In the end, it’s always change we just have to get used to… right?

Well, not necessarily. Luckily, there is modding!

Modding Spotify

The really neat open-source tool/application Spicetify comes to the rescue! Their wiki page has a pretty beginners-friendly set-up guide, so I won’t go into detail as to how to set up Spicetify in general.

Once you’ve applied the Spicetify patches, start up Spotify and you’ll be greeted with a new tab on the left navigation bar in addition to the search etc.: The Marketplace tab!

Personalizing Spotify

Using the new Marketplace tab, you can easily search for various extensions, themes and more. Just scroll around & install what suits you; there are really cool features available, like an actual live lyrics page (“Beautiful Lyrics” by “SoCalifornian”) for songs where the words are beautifully highlighted which are currently being sung in comparison to the stock lyrics which just show the currently sung lyrics line & much more.

Restoring large album art / covers

What bugged me the most of the new design is that even the “large” cover view is just too tiny for me. I like to look at the album cover while listening to music and this is really a bummer for me with the new design.

However, there is a solution to that as well! In the Spicetify Marketplace, download the extension “CSS Editor”. This allows you to manually set CSS overrides to your Spotify application.

I’ve prepared a CSS snippet, which you can copy/paste into your custom CSS box, after installing the “CSS Editor” extension and clicking the F12 key. In the newly opened window, paste the following:

/* Make the cover art larger */
.main-coverSlotExpanded-container {
    border-radius: 5px;
    position: relative;
    width: 70%;
    left: 15%;
}

div:has(.main-coverSlotExpanded-container) {
  position: relative !important;
}

This will make your album art much larger in the extended cover view (press the arrow icon on the cover if you have the tiny cover art enabled).

Creating your own custom CSS

If you want to fiddle around a little yourself and make Spotify truly yours, this is how you can do it:

• Add the string --remote-debugging-port=9222 at the end of Spotify shortcut (enabling debugging using the startup options)
• Restart the Spotify application (also make sure to end the application using the taskbar)
• Open any Chromium based browser (Edge, Google Chrome, …)
• Open the internal web page chrome://inspect/ using your address bar
• A list of remote targets should appear, including an entry of Spotify
• Click the “Inspect” next to it

Now you can inspect and live-change stuff of the Spotify application, just like you would within any web browser. Make sure to note any changes made and add them to the “CSS Editor” Spicetify window to have the changes persisted. Enjoy your customized Spotify!

Screenshots of my results

I have the following extensions installed:

• “Display full Album date” by “huhridge”
• “Playlist finder” by “Florry”
• “Spicetify DJ Infos” by “L3N0X”
• “Song Stats” by “CharlieS1103”
• “CSS Editor” by “FlafyDev”
• “Beautiful Lyrics” by “SoCalifornian”

I’m using the theme “Sleek” by “harbassan” in the green look.

Lastly, I have some additional custom CSS mods, which adds outlines to header texts, hides some unnecessary leading space for headers and hides some buttons I don’t need, such as the “Home” button in the navigation bar, as well as the “Saved songs” and “Your episodes” fake-playlists, as I don’t use these features and they just fill up my list.

My full custom CSS block:

Changelog:

2023-08-05:

• Initial creation

2023-09-22:

• Bugfixes due to new Spotify update
• Added shadow to cover for better transition
• Decreased playlist spacing and played timestamp margin to something more reasonable than the default

Current version:

/* Make the cover art larger */
.main-coverSlotExpanded-container {
    border-radius: 5px;
    position: relative;
    width: 70%;
    left: 15%;
}

/* Update 09-2023: 
    - Set position also to relative for parent div of cover art 
    - Add smooth transition from playlists to cover using shadow    
*/
div:has(.main-coverSlotExpanded-container) {
  position: relative !important;
  box-shadow: 0px -8px 15px 6px #202020;
}

/* Update 09-2023: Decrease gap between playlists */
[data-encore-id="listRow"] {
  padding: 0;
}

/* Update 09-2023: Decrease size of played timestamp to something reasonable */
.main-yourLibraryX-libraryItem {
  --columnSize: 90px;
}

/* Outline header text (for better readability) 
    Update 09-2023: Increased to 2px
*/
.main-entityHeader-headerText {
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}

/* Hide unnecessary leading space before playlist title*/
.main-entityHeader-container.main-entityHeader-nonWrapped {
  height: 320px;
}

/* Hide unnecessary library button */
/*.main-yourLibraryX-header {
  display: none;
}*/

/* Hide home button */
[data-id="/"] {
  display: none;
}

/* Hide "saved songs" */
li:has([aria-describedby="onClickHintspotify:collection:tracks"]) {
  display: none;
}

/* Hide "your episodes" */
li:has([aria-describedby="onClickHintspotify:collection:your-episodes"]) {
  display: none;
}

/* Fix broken highlighting */
a.active, a.active svg {
    color: var(--spice-text) !important;
}
svg.search-active-icon path, svg.home-active-icon path {
    color: var(--spice-text) !important;
}