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:


For Adwaita, the file can be found here:


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:



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


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

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:


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


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:


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

For Yaru:


For Adwaita:


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.