A theme for Spicetify with support for light/dark modes and album art based colors.

  • By Julien
  • Last update: Dec 26, 2022
  • Comments: 14

DefaultDynamic for Spicetify

This is a tweaked version of the Default theme. The main differences are the light/dark toggle, the background cover and the dynamic highlight color, ie. it will match the current album art.

Preview

demo-base

Install / Update

Make sure you are using latest releases of Spicetify and Spotify

Windows (PowerShell)

Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/JulienMaille/spicetify-dynamic-theme/master/install.ps1" | Invoke-Expression

Linux/MacOS (Bash)

curl -fsSL https://raw.githubusercontent.com/JulienMaille/spicetify-dynamic-theme/master/install.sh | sh

Manual Install

  1. Download the latest Source code (zip)
  2. Extract the files to your Spicetify/Themes folder (rename the zipped folder to DefaultDynamic)
  3. Copy default-dynamic.js to your Spicetify/Extensions folder
  4. Add the 2 lines in [Patch] section of the config file (see details below)
  5. Run: 
    spicetify config extensions default-dynamic.js extensions Vibrant.min.js
spicetify config current_theme DefaultDynamic
spicetify config color_scheme base
spicetify config inject_css 1 replace_colors 1
spicetify apply

IMPORTANT!

From Spotify > v1.1.62, in sidebar, they use an adaptive render mechanic to actively show and hide items on scroll. It helps reducing number of items to render, hence there is significant performance boost if you have a large playlists collection. But the drawbacks is that item height is hard-coded, it messes up user interaction when we explicitly change, in CSS, playlist item height bigger than original value. So you need to add these 2 lines in Patch section in config file:

[Patch]
xpui.js_find_8008 = ,(\w+=)32,
xpui.js_repl_8008 = ,${1}28,

Follow system dark/light theme (PowerShell)

Automatic dark mode should work on MacOs and Linux out of the box. From Spotify > v1.1.70, dark mode is forced in Windows builds. You will need to patch Spotify.exe using this script:

Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/JulienMaille/spicetify-dynamic-theme/master/patch-dark-mode.ps1" | Invoke-Expression

Hide Window Controls:

Windows user, please edit your Spotify shortcut and add flag --transparent-window-controls after the Spotify.exe

hide-controls

Uninstall

Windows (PowerShell)

Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/JulienMaille/spicetify-dynamic-theme/master/uninstall.ps1" | Invoke-Expression

Linux/MacOS (Bash)

curl -fsSL https://raw.githubusercontent.com/JulienMaille/spicetify-dynamic-theme/master/uninstall.sh | sh

Manual Uninstall

  1. Remove Patch lines you added in config file earlier.
  2. Run: 
    spicetify config current_theme " " color_scheme " " extensions default-dynamic.js- extensions Vibrant.min.js-
spicetify apply

Github

https://github.com/JulienMaille/spicetify-dynamic-theme

Comments(14)

  • 1

    Add Option to Lock theme into certain color or pick color for theme using color picker.

    Is your feature request related to a problem? Please describe.

    I like to have 3 options called Color Lock , Color Picker and Reset to Defualt-

    1.Color Lock- Use to a lock theme to certain one color picked by album art without changing it per song. 2.Color Picker with Hex code Support- Manually pick wanted color using color picker and keep that color. 3.Reset to Defualt- Remove all Color Locking And Picking Settings.

    Describe the solution you'd like 1.Color Lock-
    When I using this theme it will match color to the current album art Automatically which is awesome, but think when it does user finds a very beautiful color user wants to set as fixed color in spotify and keep it without changing it's color again when next song starts...So for that Can you add a Color Lock Function?(I Upload some pictures for better understanding..) (Please Add this option to both player menu and theme menu!) 2.Color Picker with Hex code Support- Think user needs a custom color (Ex-Orange) So using this user can pick orange color or type relevant hex code and make it fixed color on Spotify as long as he/she wants - (Please use https://github.com/yairEO/color-picker - Open Source Javascript Minimal Color Picker So it will save some time!😉 3.Reset to Defualt- Revert all Color Locking And Picking Settings and make theme settings to default So theme will again starts to match color to the playing song Automatically.

            ♦.Color Lock Deactive-

    Color Lock DA

            ♦.Color Lock Active-

    Color Lock Active

            ♦.Menu Normal-

    Menu

           ♦.Menu  Expanded-

    Menu Drop

           ♦.Menu with Color Picker-

    Menu Drop 2

  • 2

    use "fullscreen" image when available, general bugfixes with podcasts

    This should allow for the spotify "fullscreen" images to be used when available, resorting to the album art if it isnt found. should randomly pick the album art if there is multiple. fixed the colour extractor spamming requests every 200ms if the album art doesnt exist (local files + any song without an image)

  • 3

    [BUG] Scroll extent calculated wrongly

    Describe the bug Excess area while scrolling playlists.

    To Reproduce Add a lot (50+) playlists and try to scroll them

    Screenshots Screenshot 2021-11-01 at 22 41 41

    Desktop:

    • OS: macOS 11.6
    • Spicetify: v2.7.1
    • Spotify: Spotify for macOS (Apple Silicon) 1.1.71.560.gc21c3367
    • spicetify-dynamic-theme: latest

    What helped me I've added these lines to the config file, and it works fine now

    [Patch]
xpui.js_find_8008 = ,(\w+=)32,
xpui.js_repl_8008 = ,${1}28,
  • 4

    I need help!

    Hi! I want to know if there is any solution for this kind of bug on the top of the window, cause it seems a little bit short than usual. And I want to know if there is any way to remove the Spotify premium sing on the top left. Sorry for my English, it is not my first language. imagen_2021-05-31_223719

  • 5

    Can you help me please?)

    Hey. Thanks for theme, it's really cool. But I have one problem, maybe you can help me? I have ultrawide monitor, and I have slightly stung the left sidebar, so now I have a lot of empty space on the right. This happens on absolutely all pages. Maybe you know what I should write in css, so that I have all the content in the center?

    1 2 3

  • 6

    The theme doesn't change when i change the song

    When a new song plays the colors of the theme don't change.

    They do change when i go to a song after it and go to the previously mentioned song.

    there's the video of encountering the issue https://gyazo.com/08de45e24fb06b43d373ad86a1a60557

    win 10 spicetify 2.9.2 dynamic theme 3.5

  • 7

    White text on "Your top genres" and "Browse all" cards for better readability

    Is your feature request related to a problem? Please describe. The text on the cards on the search page is often very hard to read with the colors the theme chooses (see screenshot 1).

    Describe the solution you'd like Make the text on the cards on the search page white, or a light gray, so that the text is readable on the different colored backgrounds.

    Describe alternatives you've considered I could just update the user.css for myself, but I think this might be something that should be standard for the theme.

    .x-categoryCard-CategoryCard and .a2ruVaZt_DdrdHz3GqgU (?) would need color: white, or some other lighter color. (e.g. #eaeaea like most other "white" text)

    Additional context Hard to read text (Indie): Your top genres cards with dark brown/grey text that is hard to read

    Good to read text (white text): Your top genres cards with white text that is easy to read

  • 8

    Cover art takes over background and I can't access playlist song and other options

    Describe the bug When I select a playlist or any other option on the sidebar, the song's cover art takes over the background and I can't select anything

    To Reproduce Steps to reproduce the behavior:

    1. Open Spotify on the latest version of spicetify and theme
    2. Select a playlist or any other sidebar option that would change the main page

    Screenshots image

    Desktop Setup

    • Operating System: Windows 11
    • Spotify: Spotify for Windows 1.1.86.857.g3751ee08
    • Spicetify: 2.10.1
    • Theme: 3.9

    Logs

    Loaded Marketplace extension
extension.js:81 Initializing extension:  Object
extension.js:81 Initializing extension:  Object
extension.js:81 Initializing extension:  Object
group-session.js?time=1654273818667:683 Found local device id (e061f46c7db969986f649fc8c99ff091d52b9d46)
vendor~xpui.js:29 The buttonLegacy prop has been deprecated. This prop will be removed soon. Please migrate to new button styles by removing this prop.
Read more: https://encore.spotify.net/web/whats-new/green-buttons/?format=web-js
i @ vendor~xpui.js:29
webnowplaying.js:124 WebSocket connection to 'ws://127.0.0.1:8974/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
init @ webnowplaying.js:124
webnowplaying.js:124 WebSocket connection to 'ws://127.0.0.1:8974/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
init @ webnowplaying.js:124
webnowplaying.js:124 WebSocket connection to 'ws://127.0.0.1:8974/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
init @ webnowplaying.js:124
webnowplaying.js:124 WebSocket connection to 'ws://127.0.0.1:8974/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
init @ webnowplaying.js:124
webnowplaying.js:124 WebSocket connection to 'ws://127.0.0.1:8974/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
init @ webnowplaying.js:124
webnowplaying.js:124 WebSocket connection to 'ws://127.0.0.1:8974/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
init @ webnowplaying.js:124
webnowplaying.js:124 WebSocket connection to 'ws://127.0.0.1:8974/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
init @ webnowplaying.js:124
webnowplaying.js:124 WebSocket connection to 'ws://127.0.0.1:8974/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
init @ webnowplaying.js:124
webnowplaying.js:124 WebSocket connection to 'ws://127.0.0.1:8974/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
init @ webnowplaying.js:124
webnowplaying.js:124 WebSocket connection to 'ws://127.0.0.1:8974/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
init @ webnowplaying.js:124
webnowplaying.js:124 WebSocket connection to 'ws://127.0.0.1:8974/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
init @ webnowplaying.js:124
DevTools failed to load source map: Could not load content for https://xpui.app.spotify.com/vendor~xpui.js.map: Connection error: net::ERR_NAME_NOT_RESOLVED
DevTools failed to load source map: Could not load content for https://xpui.app.spotify.com/xpui.js.map: Connection error: net::ERR_NAME_NOT_RESOLVED
DevTools failed to load source map: Could not load content for https://xpui.app.spotify.com/8696.js.map: Connection error: net::ERR_NAME_NOT_RESOLVED
DevTools failed to load source map: Could not load content for https://xpui.app.spotify.com/5799.js.map: Connection error: net::ERR_NAME_NOT_RESOLVED
DevTools failed to load source map: Could not load content for https://xpui.app.spotify.com/xpui-routes-playlist.js.map: Connection error: net::ERR_NAME_NOT_RESOLVED
DevTools failed to load source map: Could not load content for https://xpui.app.spotify.com/xpui-desktop-modals.js.map: Connection error: net::ERR_NAME_NOT_RESOLVED
  • 9

    I can't apply the transparent background to my spicetify using the DefaultDynamic

    Describe the bug

    No transparent colors to my spicetify theme

    To Reproduce Steps to reproduce the behavior:

    1. During the instalation i followed every step correctly and yet i cant apply the background

    Screenshots

    image

    Desktop Setup

    • Operating System: Windows 10
    • Spotify: Spotify 1.1.83.956
    • Spicetify:
    • Theme: DefaultDynamic

    Logs

    [paste logs here]
  • 10

    Play/Pause Button is Invisible/ Playlist Album Art

    Describe the bug

    1. Play/Pause Button is Invisible
    2. Playlist show album art

    To Reproduce Steps to reproduce the behavior:

    1. Installed on a fresh spotify and spicetify

    Screenshots image

    Desktop Setup

    • Operating System: Windows 11
    • Spotify: 1.1.83.956.gbe7ea9a7
    • Spicetify: 2.9.2
    • Theme: 3.6 and 3.7 Tested

    Logs Can't get dev tools to work no matter what I try.

  • 11

    Artist Name Interferes With Album Name

    Describe the bug

    The Album name overlaps with the artist's name making you unable to click on either unless you really try and you cant see it. Also, they are both on the same line rather than being on 3 different lines. Screenshots

    Screenshot 2022-04-24 174407 Screenshot 2022-04-24 174351

  • 12

    Plugin "Star Ratings" does not load or work with this theme

    Whenever this theme is used, the plugin "star ratings" does not load.

    • Operating System: Windows 11
    • Spotify: Spotify for Windows 1.1.97.962.g24733a46
    • Spicetify: 2.14.0
    • Theme: DynamicDefault
  • 13

    Lyrics in Fullscreen not working

    Describe the bug The show lyric function in Fullscreen mode while listening to a song doesn't work.

    Screenshots image_2022-10-29_162352692

    Desktop Setup

    • Operating System: Windows 11
    • Spotify: 1.1.97.962.g24733a46
    • Spicetify: v2.14.1
    • Theme: DefaultDynamic

    Logs

    image

  • 14

    Automatic system theme application no longer working

    Describe the bug When Spotify desktop is opened with this theme applied, it loads with the Dark theme no matter what the system theme is or what theme was previously set in-app. It does notify "dark theme applied" on first load. When, before, the theme would automatically change in reaction to the system theme, it no longer does.

    This started happening after 3 major updates:

    1. Spotify updater forced me to redownload the whole app from browser.
    2. I ran spicetify upgrade to v2.14
    3. I re-ran the MacOS install sh script from the spicetify-dynamic-theme readme.

    This is by far my favorite Spicetify theme because of the subtle styling and a good light theme 😱, so thank you for the work you've done on this! Sorry if this is an OS, Spicetify, or personal setup issue I'm misinterpreting.

    To Reproduce Steps to reproduce the behavior:

    1. With Spotify quit, Switch MacOS to system light theme.
    2. Open Spotify. (Would show Dark theme still)
    3. Switch Spotify theme manually to light.
    4. Switch MacOS to dark theme. (Spotify would be light still)

    Screenshots Spicetify-dynamic-theme-auto-system-bug

    Desktop Setup

    • Operating System: MacOS 12.6
    • Spotify: Spotify for macOS (Intel) 1.1.95.893.g6cf4d40c
    • Spicetify: 2.14.0
    • Theme: v4.0

    Logs

    cosmos-connector:  fetchAdForSlot endpoint=%o sp://ads/v1/ads/hpto
DevTools failed to load source map: Could not load content for https://xpui.app.spotify.com/vendor~xpui.js.map: Connection error: net::ERR_NAME_NOT_RESOLVED
DevTools failed to load source map: Could not load content for https://xpui.app.spotify.com/xpui.js.map: Connection error: net::ERR_NAME_NOT_RESOLVED
DevTools failed to load source map: Could not load content for https://xpui.app.spotify.com/8696.js.map: Connection error: net::ERR_NAME_NOT_RESOLVED
DevTools failed to load source map: Could not load content for https://xpui.app.spotify.com/home-hpto.js.map: Connection error: net::ERR_NAME_NOT_RESOLVED
DevTools failed to load source map: Could not load content for https://xpui.app.spotify.com/4453.js.map: Connection error: net::ERR_NAME_NOT_RESOLVED
DevTools failed to load source map: Could not load content for https://xpui.app.spotify.com/7269.js.map: Connection error: net::ERR_NAME_NOT_RESOLVED
DevTools failed to load source map: Could not load content for https://xpui.app.spotify.com/home-v2.js.map: Connection error: net::ERR_NAME_NOT_RESOLVED
DevTools failed to load source map: Could not load content for https://xpui.app.spotify.com/xpui-desktop-modals.js.map: Connection error: net::ERR_NAME_NOT_RESOLVED
DevTools failed to load source map: Could not load content for https://xpui.app.spotify.com/5392.js.map: Connection error: net::ERR_NAME_NOT_RESOLVED
DevTools failed to load source map: Could not load content for https://xpui.app.spotify.com/8419.js.map: Connection error: net::ERR_NAME_NOT_RESOLVED

Popular Tag

Related