Automatic Dark/Light Mode

[zlyfer]

Afaik there is no simple way to automatically switch between the dark and light version of the SpicetifyDefault theme when the system theme changes. Is there a way to automate what

spicetify config color_scheme dark // or 'light'
spicetify apply

does? Pretty sure that this could be a candidate for a good feature.

[2zqa]

This would be possible using CSS's prefers-color-scheme.

Currently it gets the colors from colors.ini and converts it to CSS in a :root pseudo-class: https://github.com/khanhas/spicetify-cli/blob/f9ebab819516e1c71be7e8cc6c9a6ac694253680/src/apply/apply.go#L172-L196

Instead, it could get colors from both the dark and light mode and use @media (prefers-color-scheme: dark) for auto-switching.

As a workaround, you could do this for now:

1. Get colors from your current theme (for example, default dark)
   1. Right click -> Inspect element
   2. Go to sources -> locate zlink.app.spotify.com > css > user.css
   3. Copy :root element that contains all the colors:

      :root {
      --modspotify_sidebar_and_player_bg: #fafafa;
      --modspotify_rgb_sidebar_and_player_bg: 250,250,250;
      --modspotify_slider_bg: #fafafa;
      --modspotify_rgb_slider_bg: 250,250,250;
      --modspotify_preserve_1: #bfbfbf;
      --modspotify_rgb_preserve_1: 191,191,191;
      --modspotify_cover_overlay_and_shadow: #000000;
      --modspotify_rgb_cover_overlay_and_shadow: 0,0,0;
      --modspotify_main_fg: #fe6f61;
      --modspotify_rgb_main_fg: 254,111,97;
      --modspotify_secondary_fg: #3d3d3d;
      --modspotify_rgb_secondary_fg: 61,61,61;
      --modspotify_pressing_button_fg: #dedede;
      --modspotify_rgb_pressing_button_fg: 222,222,222;
      --modspotify_miscellaneous_hover_bg: #383145;
      --modspotify_rgb_miscellaneous_hover_bg: 56,49,69;
      --modspotify_indicator_fg_and_button_bg: #fe6f61;
      --modspotify_rgb_indicator_fg_and_button_bg: 254,111,97;
      --modspotify_selected_button: #fe6f61;
      --modspotify_rgb_selected_button: 254,111,97;
      --modspotify_main_bg: #fafafa;
      --modspotify_rgb_main_bg: 250,250,250;
      --modspotify_sidebar_indicator_and_hover_button_bg: #ff6f61;
      --modspotify_rgb_sidebar_indicator_and_hover_button_bg: 255,111,97;
      --modspotify_pressing_fg: #ff5c86;
      --modspotify_rgb_pressing_fg: 255,92,134;
      --modspotify_scrollbar_fg_and_selected_row_bg: #ebebeb;
      --modspotify_rgb_scrollbar_fg_and_selected_row_bg: 235,235,235;
      --modspotify_pressing_button_bg: #383145;
      --modspotify_rgb_pressing_button_bg: 56,49,69;
      --modspotify_miscellaneous_bg: #3f3c45;
      --modspotify_rgb_miscellaneous_bg: 63,60,69;
      }

2. Go to your theme folder using spicetify path and edit user.css
3. Add @media (prefers-color-scheme: dark) { at the top, paste your css you copied previously and don't forget to add a closing curly bracket
4. Apply the opposite theme using spicetify cli (for example, light)

Now Spicetify will auto-generate the light theme :root pseudo-class, but the prefers-color-scheme media query will override that when you are using dark mode.

[zlyfer]

Nice that worked perfectly! Thank you very much. I wrote this little batch file (Windows only, I guess?) to semi automate the color_scheme change process.

@echo off
setlocal enabledelayedexpansion

set light=7:00
set dark=17:30

if "%1"=="auto" goto auto
if "%1"=="toggle" goto toggle

start /B cmd /C call "spauto" auto >_spauto 2>&1
goto end

:auto
set color_scheme=0
:auto2
set t=%time:~0,5%
if %t%==%light% set color_scheme=light
if %t%==%dark% set color_scheme=dark
if not %color_scheme%==0 (
    spicetify config color_scheme %color_scheme%
    spicetify apply
    timeout /t 60 >nul
    goto auto
)
timeout /t 1 >nul
goto auto2

:toggle
spicetify config color_scheme > .tmp
set /p color_scheme=<.tmp
del .tmp
if %color_scheme%==dark spicetify config color_scheme light
if %color_scheme%==light spicetify config color_scheme dark
spicetify apply
goto end

:end

Usage is spauto toggle to simply toggle between 'dark' and 'light' color scheme or spauto auto to let it run (window stays open) and automatically change the color scheme based on the given time values (beware 12/24h format?). Only using spauto (must be called by a terminal or similiar) attempts to run spauto auto in background. I would recommend the solution above though. I shared this just in case someone is interested.

[VincentJoshuaET]

How do I do this for macOS?