How to customize Lock Screen theme in Ubuntu 20.04

Question

I changed the gnome shell theme of the login screen to Yaru-dark by following instructions in this answer. I did notice the dark calendar and system menu when I log on after reboot. However, when I lock my computer with Super+L, the lock screen still has white calendar and system menu, so I would like to make those dark as well.

All the answers I've seen so far are for Ubuntu 18.04, since they refer to /usr/share/gnome-shell/ubuntu.css which I do not have. I do have a /usr/share/gnome-shell/gnome-shell-theme.gresource, but changing that to my dark theme gresource still results in light shell on lock screen. Some other answers refer to a /usr/share/gnome-shell/theme/gdm3.css, which I do not have either (the only css file I see in that directory is a gnome-classic.css).

I would just like to know which css file or which gresource file controls the lock screen theme on Ubuntu 20.04.

Solution

In a fresh install of Ubuntu 20.04, the default shell theme.. and lock screen both are configured to use the css file

Yaru/gnome-shell.css which is inside the /usr/share/gnome-shell/theme/Yaru/gnome-shell-theme.gresource

this is configured in the file /usr/share/gnome-shell/modes/ubuntu.json

{
    "parentMode": "user",
    "stylesheetName": "Yaru/gnome-shell.css",
    "themeResourceName": "theme/Yaru/gnome-shell-theme.gresource",
    "debugFlags": ["backtrace-crashes-all"],
    "enabledExtensions": ["[email protected]", "[email protected]", "desktop-icons@csoriano"]
}

So, you can pointout what ever .gresource file you want to use and the corresponding gnome-shell.css

for example, If I want Yaru-dark theme, I can simply point out like this by editing the file /usr/share/gnome-shell/modes/ubuntu.json

Take Backup of the file /usr/share/gnome-shell/modes/ubuntu.json before editing

{
    "parentMode": "user",
    "stylesheetName": "Yaru-dark/gnome-shell.css",
    "themeResourceName": "theme/Yaru/gnome-shell-theme.gresource",
    "debugFlags": ["backtrace-crashes-all"],
    "enabledExtensions": ["[email protected]", "[email protected]", "desktop-icons@csoriano"]
}

Please note that Default shell theme and lock screen uses same file.. so If you want Yaru shell theme for the desktop session.. you need to install it as a local theme which is another topic.

I have not tried with full path of the .gresource file.. in the line

"themeResourceName": "theme/Yaru/gnome-shell-theme.gresource",

this means.. theme/Yaru/gnome-shell-theme.gresource is a relative path of the base /usr/share/gnome-shell

Comments

[UnKNOWn]

Hi yaru dark on login screen how did you do that workaround 1 from the answer or someother way?

[Jason]

@PRATAP I did not use your workaround 1. I extracted and modified the original /usr/share/gnome-shell/theme/Yaru/gnome-shell-theme.gresourc‌​e, then packed it into my own gresource file. I then made a new directory /usr/share/gnome-shell/theme/Yaru-dark and placed my modified gresource file in it. Lastly, I used sudo update-alternatives to change the link gdm3-theme.gresource to point to the modified gresource file. The result was that the gnome shell on the login reboot screen became dark, which is great, but the lock screen remained unchanged.

[UnKNOWn]

0k thanks for clarification.. it is possible also for lock screen.. i am working on it.. Will let u know in some time..

[Jason]

Thanks, this worked. So basically themeResourceName is the relative path to the gresource file and stylesheetName is the path within the gresource file, correct?

[Enterprise]

Note: Do not save a backup of any *.json file in /usr/share/gnome-shell/modes/ using an extension appended to the end of the original full-filename. For example, do not save ubuntu.json as ubuntu.json.backup. Ubuntu will frustratingly load your backup as if it were a valid file. Instead, drop the json part of the back up filename, and you will not have this issue. For example, it is OK to save a copy of your original ubuntu.json file as ubuntu.backup, and your new ubuntu.json file will be loaded correctly.