Working toggle light/dark mode

[zeventh]

I always liked "only" dark mode but as I'm using Whitesur theme for my work laptop I needed a way to get toggle of light/dark mode working due to a lot of sunlight coming in to my room. So I struggled a bit to get it working but finally found a workaround that works really good.

I'm running Ubuntu 24.04 with Gnome 46.

Extensions needed

User Themes - https://extensions.gnome.org/extension/19/user-themes/ Night Theme Switcher - https://extensions.gnome.org/extension/2236/night-theme-switcher/

Configuration

# Add user-themes extension to glib schemas
sudo cp $HOME/.local/share/gnome-shell/extensions/[email protected]/schemas/org.gnome.shell.extensions.user-theme.gschema.xml /usr/share/glib-2.0/schemas
sudo glib-compile-schemas /usr/share/glib-2.0/schemas

# Install theme with -l. (The rest you can decide for yourself).
./install.sh -l -t purple -o solid --normal --default

# Create scripts directory
scriptsDir="$HOME/scripts"
mkdir $scriptsDir

# Create dark mode script (you may need to edit gtk-theme, user-theme and icon-theme names, or comment the ones you don't need)
cat <<'EOF' > $scriptsDir/toggle-dark-mode.sh
#!/bin/bash

gsettings set org.gnome.desktop.interface color-scheme prefer-dark
gsettings set org.gnome.desktop.interface gtk-theme "WhiteSur-Dark-solid-purple"
gsettings set org.gnome.desktop.interface icon-theme "Papirus-Dark"
gsettings set org.gnome.shell.extensions.user-theme name "WhiteSur-Dark-solid-purple"
ln -fs $HOME/.config/gtk-4.0/gtk-Dark.css $HOME/.config/gtk-4.0/gtk.css
EOF

# Create light mode script (you may need to edit gtk-theme, user-theme and icon-theme names, or comment the ones you don't need)
cat <<'EOF' > $scriptsDir/toggle-light-mode.sh
#!/bin/bash

gsettings set org.gnome.desktop.interface color-scheme prefer-light
gsettings set org.gnome.desktop.interface gtk-theme "WhiteSur-Light-solid-purple"
gsettings set org.gnome.desktop.interface icon-theme "Papirus-Light"
gsettings set org.gnome.shell.extensions.user-theme name "WhiteSur-Light-solid-purple"
ln -fs $HOME/.config/gtk-4.0/gtk-Light.css $HOME/.config/gtk-4.0/gtk.css
EOF

# Add executable permissions on scripts
chmod +x $scriptsDir/toggle-dark-mode.sh
chmod +x $scriptsDir/toggle-light-mode.sh

2. Open settings for Night Theme Switcher extension and in Commands tab enter the following:

Sunrise: $HOME/scripts/toggle-light-mode.sh Sunset: $HOME/scripts/toggle-dark-mode.sh

Edit

Added executable permissions on scripts.

[luismxlina]

Great job! I've been striving to achieve this but couldn't find a way, so thank you!

I have two questions:

Firstly, regarding the user-themes extension schemas, is it supposed to be an existing file on your machine? Mine treats user-themes as a system extension, but I can't locate the corresponding folder or the .xml for the extension anywhere.

Secondly, I'm curious if the programs affected by libadwaita change their color scheme when you toggle between dark and light modes on your machine. I've found that it only works when I change the installation method from:

./install.sh -i arch --roundedmaxwindow -N glassy -l (My preferred installation method)

to:

./install.sh -i arch --roundedmaxwindow -N glassy -l -c Light

After that, I have to log out to see the changes, as I'm unaware of any method to make gtk4 hot reload its configuration. I appreciate your assistance; I'm not very experienced with these customizations. Additionally, I hope this can be integrated into the main WhiteSur installation if @vinceliuice deems it feasible, as it would be fantastic!

[zeventh]

I'm pleased I can help out to the community!

Regarding your first question about user-themes extension. User-Themes extension is installed under "User-Installed" on my machine, but are you able to run the command gsettings set org.gnome.shell.extensions.user-theme name "theme_name"? If so, I need to update my post when adding "user-themes extension to glib schemas" to only apply on User-Installed extension.

For your second question, as of now libadwaita theme only apply when closing and re-opening application, I haven't found a way to apply theme on currently open libadwaita apps. But as the Night Theme Switcher extension already applies light or dark theme when I boot up my machine I'm currently not affected by this, unless I wan't to manually toggle theme.

Also one thing I forgot to mention is that Snap apps won't be themed with this script, I have uninstalled snap completely from Ubuntu and installed Flatpak instead.