spicetify
spicetify copied to clipboard
catppuccin
Variants that automatically switch between latte and the dark variants
The CSS could use media queries to determine if it should apply the light or the dark colours. I achieved it once with another theme, but I was just copy pasting from another site.
I'd very much prefer such a variant, because now I'm manually switching all the time between latte and mocha, and Spotify is basically a web app, so it can have such a theme.
This bandaid for your shell config helps. I don't want it to automatically run when macOS changes colors because it would stop music currently playing (as spotify reboots). There is definitely a way to live-update themes without restarting (https://github.com/FlafyDev/spotify-css-editor) but no extension currently exists (that I could find).
light="catppuccin-latte"
dark="catppuccin-mocha"
alias spotl="spicetify config current_theme ${light} && spicetify config extensions ${dark}.js- && spicetify config extensions ${light}.js &&spicetify apply enable-devtools"
alias spotd="spicetify config current_theme ${dark} && spicetify config extensions ${light}.js- && spicetify config extensions ${dark}.js &&spicetify apply enable-devtools"
spot(){
current_theme=$(spicetify config current_theme)
if [[ "$current_theme" == "$dark" ]]; then
spotl
else
spotd
fi
}
I'll look into implementing this soon now that we have a settings menu, would be pretty simple! notes:
- toggle button "Enable system dynamic theming"
- dropdown box (once toggled=true) "Select dark mode variant"
- remote fetch color.ini as its not accessible from the file system
- overwrite color vars using head/
- correct Spicetify.Config.Color_scheme to match
- re-render react to update accent colors
There is some unfortunate news, Spotify passes in a force-dark-mode flag during its chromium compilation stage. This means there is no way for us to know what the current system theme is with js OR css.
The only current solution is manually patching the executable by hand, im not sure where to go from here... Maybe a button in the topbar to swap between the two? it wouldnt be automatic but it would be something, what do you think?
It feels starting to get overengineered with the buttons and all that (at least for a first/most basic version of this). I'm not sure about if the forced dark mode is Windows specific, but on macOS I could manage to use the OS settings with media queries, using the method suggested here.
Here's my example version for the green colour scheme alternating between latte and mocha:
Put this to the end of the `user.css` of a Catppuccin theme
:root {
--spice-shadow: #e6e9ef;
--spice-button-active: #7c7f93;
--spice-notification-error: #d20f39;
--spice-highlight-elevated: #2a2a2a;
--spice-highlight: #1a1a1a;
--spice-button-disabled: #9ca0b0;
--spice-tab-active: #ddc0da;
--spice-main-elevated: #242424;
--spice-accent: #fae3b0;
--spice-misc: #acb0be;
--spice-button: #8c8fa1;
--spice-subtext: #4c4f69;
--spice-main: #eff1f5;
--spice-sidebar: #e6e9ef;
--spice-selected-row: #acb0be;
--spice-text: #40a02b;
--spice-card: #ccd0da;
--spice-player: #dce0e8;
--spice-equalizer: #40a02b;
--spice-notification: #ddc0da;
--spice-rgb-shadow: 230,233,239;
--spice-rgb-button-active: 124,127,147;
--spice-rgb-notification-error: 210,15,57;
--spice-rgb-highlight-elevated: 42,42,42;
--spice-rgb-highlight: 26,26,26;
--spice-rgb-button-disabled: 156,160,176;
--spice-rgb-tab-active: 221,192,218;
--spice-rgb-main-elevated: 36,36,36;
--spice-rgb-accent: 250,227,176;
--spice-rgb-misc: 172,176,190;
--spice-rgb-button: 140,143,161;
--spice-rgb-subtext: 76,79,105;
--spice-rgb-main: 239,241,245;
--spice-rgb-sidebar: 230,233,239;
--spice-rgb-selected-row: 172,176,190;
--spice-rgb-text: 64,160,43;
--spice-rgb-card: 204,208,218;
--spice-rgb-player: 220,224,232;
--spice-rgb-equalizer: 64,160,43;
--spice-rgb-notification: 221,192,218;
}
@media (prefers-color-scheme: dark) {
:root {
--spice-selected-row: #585b70;
--spice-notification-error: #f28fad;
--spice-main: #1e1e2e;
--spice-button-disabled: #6e6c7e;
--spice-button: #7f849c;
--spice-text: #a6e3a1;
--spice-button-active: #9399b2;
--spice-highlight: #1a1a1a;
--spice-player: #11111b;
--spice-misc: #585b70;
--spice-shadow: #181825;
--spice-tab-active: #313244;
--spice-highlight-elevated: #2a2a2a;
--spice-notification: #313244;
--spice-card: #313244;
--spice-subtext: #cdd6f4;
--spice-sidebar: #181825;
--spice-equalizer: #a6e3a1;
--spice-main-elevated: #242424;
--spice-rgb-selected-row: 88,91,112;
--spice-rgb-notification-error: 242,143,173;
--spice-rgb-main: 30,30,46;
--spice-rgb-button-disabled: 110,108,126;
--spice-rgb-button: 127,132,156;
--spice-rgb-text: 166,227,161;
--spice-rgb-button-active: 147,153,178;
--spice-rgb-highlight: 26,26,26;
--spice-rgb-player: 17,17,27;
--spice-rgb-misc: 88,91,112;
--spice-rgb-shadow: 24,24,37;
--spice-rgb-tab-active: 49,50,68;
--spice-rgb-highlight-elevated: 42,42,42;
--spice-rgb-notification: 49,50,68;
--spice-rgb-card: 49,50,68;
--spice-rgb-subtext: 205,214,244;
--spice-rgb-sidebar: 24,24,37;
--spice-rgb-equalizer: 166,227,161;
--spice-rgb-main-elevated: 36,36,36;
}
}
Of course this may not be completely sufficient, as the colour schemes differ by darkness level. Rather I wanted to demonstrate that probably media queries will do the trick. If not, I'd suggest coming up with something on the Spicetify side, since the ini with the variable names may limit this functionality for theme authors, and in that case, I would endorse patching it on every theme's side. The issue I linked was closed, but we may ask for reopening it.
as i said prefer color scheme does not work because --force-dark-mode is passed in as a flag, this wasnt the case until about a year ago.
I can double check but im on windows and when i tried it did not work, and if it isnt going to support all platforms there is no point implementing it!
Like i said i can just add a button for you to toggle between in the topbar like DefaultDynamic (the theme) does
I might have been too vague expressing what I did, but I tried the above CSS, and it works today with latest Spotify on macOS. I'm not aware of further modifications of my Spotify installation other than what Spicetify does.
The button fallback could be nice, and some users may even prefer having the ability to manually toggle, but I believe for the majority of users the automatic changing without any intervention is more optimal. So I'm not against having the button, it may even be necessary for Windows users, or to support colour schemes properly, but I'd prefer a no intervention/no restart solution, and I could hack it together on my machine for the one specific setup I want, it's just not future-proof, updating the themes will brake it.
Here's a video about that:
https://github.com/catppuccin/spicetify/assets/1753591/55694b98-330f-4209-b795-a0850abc950f
@ohitstom, do you think there's an Electron or something else version difference between the Windows and macOS version of Spotify? Also, the command line arguments on your screenshot are confusing for me, because it also starts with --force-dark-mode=false. Is it just you, trying to disable it?
Another guess: are you sure you got that option right about what it does? I found articles claiming that the corresponding Chrome flag enables a Dark Reader-like feature, which means sites that don't support dark mode can be displayed in dark colours if the OS' brightness settings are set to dark. Which would make sense if Spotify wanted to turn that off, since they don't develop a light mode site with dark mode support, but a dark mode site, if which gets forced dark mode modifications, may break. I'm not sure about all these though, you might know this option much better than me (since I learned about it today), I'm just confused about what I see, and want to make sure it's not a misunderstanding.
@ohitstom, do you think there's an Electron or something else version difference between the Windows and macOS version of Spotify? Also, the command line arguments on your screenshot are confusing for me, because it also starts with
--force-dark-mode=false. Is it just you, trying to disable it?
Yeah thats just me trying to disable it, all versions of spotify are just CEF its possible that flag just doesnt exist on macOS!
Could you send the code you used in a zip or something for the video you sent so i can mess around with it some?
And yeah im 100% sure that force-dark-mode is breaking the javascript functions for checking the system theme window.matchMedia('(prefers-color-scheme: light') is never correct for me but ive not tried a pure css solution (not that they should differ since matchmedia just queries the css directly)
Could you run Spicetify enable-devtools and send a screenshot of your launch flags like so? You could also try running the matchmedia to see if its correct on your end please :)
Ah, I see. Thanks for clarifying it.
My hack is just the latte variant with the user.css appended with the CSS I have above behind the expandable "Put this to the end of the user.css of a Catppuccin theme" section. I zipped the theme folder for your convenience though, if you prefer that.
Chrome Tools gives me these:
Text from Chrome Tools
List of Chrome URLs
chrome://accessibility/
chrome://blob-internals/
chrome://chrome-urls/
chrome://credits/
chrome://extensions-support/
chrome://gpu/
chrome://histograms/
chrome://indexeddb-internals/
chrome://license/
chrome://media-internals/
chrome://net-export/
chrome://net-internals/
chrome://network-errors/
chrome://print/
chrome://process-internals/
chrome://serviceworker-internals/
chrome://system/
chrome://tracing/
chrome://version/
chrome://webrtc-internals/
chrome://webui-hosts/
For Debug
The following pages are for debugging purposes only. Because they crash or hang the renderer, they're not linked directly; you can type them into the address bar if you need them.
chrome://badcastcrash/
chrome://crash/
chrome://crashdump/
chrome://gpuclean/
chrome://gpucrash/
chrome://gpuhang/
chrome://hang/
chrome://inducebrowsercrashforrealz/
chrome://inducebrowsercrashforrealz/
chrome://inducebrowserdcheckforrealz/
chrome://kill/
chrome://memory-exhaust/
chrome://memory-pressure-critical/
chrome://memory-pressure-moderate/
chrome://quit/
chrome://restart/
chrome://shorthang/
Same but as a screenshot
Running matchMedia first with dark mode, and then light mode (meaning the OS settings):
Ah, I see. Thanks for clarifying it.
My hack is just the latte variant with the
user.cssappended with the CSS I have above behind the expandable "Put this to the end of theuser.cssof a Catppuccin theme" section. I zipped the theme folder for your convenience though, if you prefer that.
the only issue with this approach is that it is not easily maintainable and would require us to do a lot of css.
It would also mean we couldn't have an option to enable or disable this feature without distributing multiple user.css
This is why I wanted to do it in js only as we can manipulate what colorscheme is applied directly through remote code.
it seems macos doesn't have this restriction like windows does if that command works for you and not for me, could you send a screenshot of the "chrome://version" page, whilst detecting os version is possible I do not have a machine to dev with meaning i couldnt implement this feature personally...
I see. I wasn't expecting JavaScript preferred to CSS, but now I get it why. By the way, here's my chrome://version (sorry I misunderstood your first screenshot request):
I see. I wasn't expecting JavaScript preferred to CSS, but now I get it why. By the way, here's my
chrome://version(sorry I misunderstood your first screenshot request):
JavaScript is definitely how I intend to implement this feature, I'll see if I can find another Windows user on spicetify to test if it works for them and it's an issue with my system, I'll let you know tomorrow
unfortunately since this isn't going to work automatically on any platform but macos there's no point implementing it in such a way, I'm happy to create a button in the topbar to swap between the two easier or you're welcome to keep using your custom setup?
I see, how unfortunate. I think, I don't have further input then. If fully automatic is not possible, and you're not interested in (or if it is not feasible or possible) developing a fallback for systems like mine, then I also believe the button thing is for the best. Thanks for hearing me out.
I see, how unfortunate. I think, I don't have further input then. If fully automatic is not possible, and you're not interested in (or if it is not feasible or possible) developing a fallback for systems like mine, then I also believe the button thing is for the best. Thanks for hearing me out.
if I had a Mac I'd be happy to do a fallback system but since I don't I can't trust without being able to test myself that the code is reliable enough, I'd be happy to implement a button for now 👍
I've started working on this but its a bigger undertaking than i expected, this may take a while im afraid
https://github.com/JulienMaille/spicetify-dynamic-theme#follow-system-darklight-theme-powershell found this
https://github.com/JulienMaille/spicetify-dynamic-theme#follow-system-darklight-theme-powershell found this
I'll look into it soon
https://github.com/JulienMaille/spicetify-dynamic-theme#follow-system-darklight-theme-powershell found this
I'll look into it soon
That powershell still works fine on Windows. I was looking at linux's binary to see if the same trick could work but can't find the string "force-dark-mode" there
https://github.com/JulienMaille/spicetify-dynamic-theme#follow-system-darklight-theme-powershell found this
I'll look into it soon
That powershell still works fine on Windows. I was looking at linux's binary to see if the same trick could work but can't find the string "force-dark-mode" there
any movement on this? I don't see any worth in implementing an automatic system if it's not consistent across all platforms
Nope, I thought you were working on this :)
had some org issues and I stopped being the maintainer for a while so I haven't been :/