How To Get Dark GNOME Shell Menus And Dialogs On Ubuntu 19.10 With Yaru Theme
For Ubuntu 19.10 (Eoan Ermine), the default Yaru theme pack has received some major changes. One of these changes is the usage of light menus and dialogs for the GNOME Shell theme (with a dark panel). In case you want to change the Ubuntu 19.10 Shell theme (Yaru) to use dark menus and dialogs, this article will explain how to do this.
I saw quite a few confused users so let me explain before continuing. The applications (GTK+) theme from the Tweaks app only changes the... applications theme, while the Shell theme is unaffected by this. So even though you switch the applications theme to say Yaru-dark, the Shell theme continues to use light menus and dialogs. What you need to change to have different GNOME Shell menus and dialogs is the GNOME Shell theme (step 2 from the instructions below will let you know how to do this).
There's a pull request (update: this is now merged) on the Yaru Github repository that brings support for installing both Yaru-light (default) and Yaru-dark Shell themes, allowing the user to change this from the Tweaks app (
It's not yet clear when or if this will land in Ubuntu 19.10, but those who want this right now can follow the instructions below to install the latest Yaru from this Git branch, and change the Shell theme. It's worth noting that using this, the GDM3 login / lock screen menus and dialogs will remain white, even after setting Yaru-dark as your Shell theme.
Also see: How To Use A Different GTK 3 Theme For Specific Applications. This should help in some cases in which you get a light menu with a dark UI app, for non-native applications like Sublime Text, Atom or VS Code.
Note that following these instructions will replace the Yaru theme you may already have installed on your system in
[[Edit]] Using these instructions now will also update Yaru to the version that uses aubergine as second accent color, and new folder icons, as seen in this article.
1. Install Yaru theme with dark and light variants
The commands below will install the required build dependencies, grab the last Yaru from Git that includes dark and light themes and still works with Ubuntu 19.10 (not the latest Git because it's no longer compatible with Ubuntu versions older than 20.04), build and install the theme:
2. Install GNOME Tweaks and the GNOME Shell User themes extension (if not already installed)
This command installs the GNOME Tweaks app and the official GNOME Shell extensions package (which contains the User themes extension that we need):
After this, restart GNOME Shell if you're using Xorg by pressing
3. Enable the User themes extension and switch to the Yaru-dark Shell theme
Now you'll need to open the Tweaks app (close and re-launch it if it was already running), go to
Since you've installed the latest Yaru from the Git branch that has both light and dark Shell theme variants, you'll be able to switch to either Yaru-dark or Yaru-light (in case you want to use light menus again). The
To undo the changes and go back to the default Yaru theme pack, exactly as it is in the repositories, remove the Yaru, Yaru-dark and Yaru-light folders from
I saw quite a few confused users so let me explain before continuing. The applications (GTK+) theme from the Tweaks app only changes the... applications theme, while the Shell theme is unaffected by this. So even though you switch the applications theme to say Yaru-dark, the Shell theme continues to use light menus and dialogs. What you need to change to have different GNOME Shell menus and dialogs is the GNOME Shell theme (step 2 from the instructions below will let you know how to do this).
There's a pull request (update: this is now merged) on the Yaru Github repository that brings support for installing both Yaru-light (default) and Yaru-dark Shell themes, allowing the user to change this from the Tweaks app (
Appearance -> Shell
). What's more, this also allows choosing Yaru (and its variants) from the GNOME Tweaks application even when using the Vanilla GNOME Shell extension, which was not possible previously. It's not yet clear when or if this will land in Ubuntu 19.10, but those who want this right now can follow the instructions below to install the latest Yaru from this Git branch, and change the Shell theme. It's worth noting that using this, the GDM3 login / lock screen menus and dialogs will remain white, even after setting Yaru-dark as your Shell theme.
Also see: How To Use A Different GTK 3 Theme For Specific Applications. This should help in some cases in which you get a light menu with a dark UI app, for non-native applications like Sublime Text, Atom or VS Code.
How to install updated Yaru theme with both light and dark GNOME Shell themes (menus and dialogs)
Yaru GNOME Shell theme with dark menus |
Note that following these instructions will replace the Yaru theme you may already have installed on your system in
/usr/share/themes
. On Ubuntu though, you can easily revert this if you want (you'll find instructions near the end of the article), by reinstalling the Yaru theme package. What's more, if you have Yaru installed under ~/.themes
, remove it before proceeding.[[Edit]] Using these instructions now will also update Yaru to the version that uses aubergine as second accent color, and new folder icons, as seen in this article.
1. Install Yaru theme with dark and light variants
The commands below will install the required build dependencies, grab the last Yaru from Git that includes dark and light themes and still works with Ubuntu 19.10 (not the latest Git because it's no longer compatible with Ubuntu versions older than 20.04), build and install the theme:
sudo apt install git meson sassc libglib2.0-dev libxml2-utils
git clone https://github.com/ubuntu/yaru
cd yaru
git checkout 734bd53
meson build
cd build
sudo ninja install
2. Install GNOME Tweaks and the GNOME Shell User themes extension (if not already installed)
This command installs the GNOME Tweaks app and the official GNOME Shell extensions package (which contains the User themes extension that we need):
sudo apt install gnome-tweaks gnome-shell-extensions
After this, restart GNOME Shell if you're using Xorg by pressing
Alt + F2
, then type r
and press Enter
. Or logout and login to restart the session if you're using Wayland.3. Enable the User themes extension and switch to the Yaru-dark Shell theme
Now you'll need to open the Tweaks app (close and re-launch it if it was already running), go to
Extensions
in its sidebar and enable the User themes
extension. Close the Tweaks app, launch it again, click on Appearance
in its sidebar and you'll be able to change the Shell
theme from there. Change it to Yaru-dark to get dark Shell menus and dialogs:Since you've installed the latest Yaru from the Git branch that has both light and dark Shell theme variants, you'll be able to switch to either Yaru-dark or Yaru-light (in case you want to use light menus again). The
Default
option from there continues to be Yaru-light (with a dark panel but light Shell menus and dialogs).How to undo the changes
To undo the changes and go back to the default Yaru theme pack, exactly as it is in the repositories, remove the Yaru, Yaru-dark and Yaru-light folders from
/usr/share/themes
, then reinstall the Yaru GTK+ and GNOME Shell themes:sudo rm -r /usr/share/themes/{Yaru,Yaru-dark,Yaru-light}
sudo apt install --reinstall yaru-theme-gnome-shell yaru-theme-gtk