How can I adjust the font size, color, boldness, etc. of the clock and date on the 20.04 lock screen?

I want to know how to adjust the font size, color, boldness, etc. of the clock and date on the 20.04 lock screen...


The CSS elements that control the display style of the clock and date fonts are wrapped up in a GTK gresource file for your selected theme, e.g. Yaru, Adwaita, etc.

For Yaru, the file can be found here:

/usr/share/gnome-shell/theme/Yaru/gnome-shell-theme.gresource

For Adwaita, the file can be found here:

/usr/share/gnome-shell/gnome-shell-theme.gresource

To make the changes, first unpack the gresource file. For example, to accomplish this with the Adwaita theme, run the following shell script. Be sure to replace the resource bundle location with the appropriate path to your theme:

gst=/usr/share/gnome-shell/gnome-shell-theme.gresource
#!/bin/sh

workdir=${HOME}/modify_resources_bundle

if [ ! -d ${workdir}/theme ]; then
    mkdir -p ${workdir}/theme
    mkdir -p ${workdir}/theme/icons
    mkdir -p ${workdir}/theme/icons/scalable
    mkdir -p ${workdir}/theme/icons/scalable/actions
    mkdir -p ${workdir}/theme/icons/scalable/status
fi

gst=/usr/share/gnome-shell/gnome-shell-theme.gresource

for r in `gresource list $gst`; do
    gresource extract $gst $r > $workdir/${r#\/org\/gnome\/shell/}
done

cp ${workdir}/theme/icons/scalable/actions/* ${workdir}/theme
cp ${workdir}/theme/icons/scalable/status/* ${workdir}/theme

There's a final step at the end of the above script to flatten the contents. This is necessary because the resource list mentioned later uses a 'file alias' directive to provide the correct path for some resources within the gresource file once bundled, but specifies that the file be in the same directory as everything else during the compilation process.

Next, in the extracted contents, edit gnome-shell.css as necessary. The CSS that influences the lock screen clock and date font style:

/* Screen Shield */
.unlock-dialog-clock {
  color: white;
  font-weight: 400;
  text-align: center;
  spacing: 24px;
  padding-bottom: 2.5em; }

.unlock-dialog-clock-time {
  font-size: 64pt;
  padding-top: 42px;
  font-feature-settings: "tnum"; }

.unlock-dialog-clock-date {
  font-size: 16pt;
  font-weight: normal; }

.unlock-dialog-clock-hint {
  font-weight: normal;
  padding-top: 48px; }

Obtain or create as necessary a resource list file for all of the theme resources. I'm running the stock or "vanilla" Gnome desktop so I've focused this guide on Adwaita -- the default Gnome theme. However, this resource list can certainly serve as a guide for other themes. For the Adwaita theme, this can be obtained here:

https://github.com/GNOME/gnome-shell/blob/gnome-3-36/data/gnome-shell-theme.gresource.xml

Copy this resource file into working directory listed in the extraction script above:

workdir=${HOME}/modify_resources_bundle

Change into the working directory and run the following command:

glib-compile-resources gnome-shell-theme.gresource.xml

This will produce a gresource binary in the same directory:

gnome-shell-theme.gresource

Copy this file back to the correct location within your distro:

For Yaru:

/usr/share/gnome-shell/theme/Yaru/gnome-shell-theme.gresource

For Adwaita:

/usr/share/gnome-shell/gnome-shell-theme.gresource

Alternately, you can create a new custom theme and specify the custom theme to be used.

NOTE: An update to gnome desktop will clobber this change. These updates aren't frequent but do happen. Creating a new custom theme will ensure that this doesn't happen but might mean you possibly miss out on some other theme tweaks that get included in any update. I prefer to simply merge the customization on every update. They really don't happen all that often.