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

1.

# Add user-themes extension to glib schemas
sudo cp $HOME/.local/share/gnome-shell/extensions/user-theme@gnome-shell-extensions.gcampax.github.com/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.

[kernelb00t]

It would be great to make a repo for those scripts so users can use them. You can even make a PR for the README to link your script to us. Or you can even find a way to integrate it into the main repo, but unless a kind of "WhiteSur-gui" (a gui to add functionnalities, like a real app to make changes to the theme) is made, I don't know if it would be possible.

[luismxlina]

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.

Thank you for your detailed response and for your willingness to help! I apologize for my late reply.

Firstly, I wanted to confirm that the command you mentioned for user-level extensions does work in my case.

Secondly, regarding the hot-reloading of configurations for libadwaita, I understand that we might not have more options other than reopening the applications or rebooting the system. It’s a bit inconvenient, but it’s manageable.

Lastly, I’ve noticed an issue that might or might not be related to the Night Theme Switcher extension. The keyboard light control from the control panel stopped working on my machine. I’m not sure if this is an independent issue or if it’s somehow connected to the extension, so if someone can contrast me or confirm. Again, thank you for your assistance and interest in this matter. Your help is greatly appreciated.

[CosmicFusion]

This is basically a hack, doesn't work without restarting the apps and has no smooth transition, like the

adwaita CSS

Or the Ubuntu CSS

Because Vince is treating gtk4 CSS the same as gtk3 CSS which wrong.

There should be one single CSS in gtk4 that contains both the styles for dark and light modes, it makes it a proper CSS style.

Both ubuntu and adwiata, and some custom themes implement it this way it's objectively the correct way.

I hope Vince fixes the style sheets soon.