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 (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)


Dark menus Yaru Ubuntu 19.10
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:

Change Yaru dark GNOME Shell theme

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