SixFoisNeuf

Totally irregular blog on computers and security


Debian-MoreBlue for LightDM GTK

Posted on Aug 2, 2023

When I first discovered Debian and installed it on my computer, I vividly remember the look of the login screen: a light blue background with swirls, and a plastic-looking login box. Based on the year (around 2010) and looking at screenshots on the Internet, I believe that was Debian Etch (4.0). Time sure flies!

login box from debian etch
The login box on Debian Etch (source: usuariodebian.blogspot.com)

I’d love to get this theme on a modern Debian. Unfortunately, it’s now pretty old, and depends on the gdm2 display manager, which is wholly obsolete.

Nevertheless, maybe we can hack together something nostalgia-indulcing while keeping up with stuff available in Bookworm?

Digging through the archives

The first step was to get a copy of this theme: screenshots aren’t going to be enough, I will need the source files for the background and the login box. Fortunately, Debian keeps an archive of all packages, since Debian 2.0 (Hamm): it’s all in archive.debian.org.

I know I’m looking for a package called gdm, which should contain the default GDM theme. Let’s look through the repository contents for Debian Etch, available at http://archive.debian.org/debian/dists/etch/main/binary-i386/Packages.gz:

$ curl http://archive.debian.org/debian/dists/etch/main/binary-i386/Packages.gz | zcat | less

I search (with /) for “Package: gdm” and am greeted with:

Package: gdm
Priority: optional
Section: gnome
Installed-Size: 11296
Maintainer: Ryan Murray <rmurray@debian.org>
Architecture: i386
Version: 2.16.4-1
Provides: x-display-manager
Depends: adduser, debconf-2.0, libart-2.0-2 (>= 2.3.16), libatk1.0-0 (>= 1.12.2), libattr1 (>= 2.4.4-1), libc6 (>= 2.3.6-6), libcairo2 (>= 1.2.4), libdmx1, libfontconfig1 (>= 2.4.0), libglade2-0 (>= 1:2.5.1), libglib2.0-0 (>= 2.12.0), libgnomecanvas2-0 (>= 2.11.1), libgtk2.0-0 (>= 2.8.0), libpam0g (>= 0.76), libpango1.0-0 (>= 1.14.8), libpopt0 (>= 1.10), librsvg2-2 (>= 2.12.7), libselinux1 (>= 1.32), libwrap0, libx11-6, libxau6, libxcursor1 (>> 1.1.2), libxdmcp6, libxext6, libxfixes3 (>= 1:4.0.1), libxi6, libxinerama1, libxml2 (>= 2.6.27), libxrandr2, libxrender1, libpam-modules (>= 0.72-1), libpam-runtime (>= 0.76-13.1), gnome-session | xterm | x-window-manager | x-terminal-emulator, xbase-clients, gksu (>= 1.0.7), lsb-base (>= 3.0-10), librsvg2-common
Recommends: whiptail | dialog, zenity, gdm-themes
Suggests: locales, apmd, msttcorefonts
Filename: pool/main/g/gdm/gdm_2.16.4-1_i386.deb
Size: 4011538
MD5sum: 26bc4bc322f3dde46e5f44df09a2859a
SHA1: 34c5156526461ac2e4031f182f3267af675fe2bc
SHA256: 35ac2ed301c3ae59220011f649ae56940ac96c86651184353e37fb0a6e0f5823
Description: GNOME Display Manager
 gdm provides the equivalent of a "login:" prompt for X displays- it
 pops up a login window and starts an X session.
 .
 It provides all the functionality of xdm, including XDMCP support for
 managing remote displays.
 .
 The greeting window is written using the GNOME libraries and hence
 looks like a GNOME application- even to the extent of supporting
 themes! By default, the greeter is run as an unprivileged user for
 security.
Tag: admin::login, interface::daemon, network::server, role::program, security::authentication, suite::gnome, uitoolkit::gtk, use::login, x11::display-manager

I now know that the package itself is in pool/main/g/gdm/gdm_2.16.4-1_i386.deb. Let’s download it and have a look inside: DEB files are just fancy ar archives.

$ wget http://archive.debian.org/debian/pool/main/g/gdm/gdm_2.16.4-1_i386.deb
$ ar x gdm_2.16.4-1_i386.deb
$ tar -xf data.tar.gz
$ tree ./usr/share/gdm/themes/
Output of tree ./usr/share/gdm/themes
usr/share/gdm/themes/
├── circles
│   ├── background.svg
│   ├── circles.xml
│   ├── flower.png
│   ├── GdmGreeterTheme.desktop
│   ├── help.png
│   ├── options.png
│   └── screenshot.png
├── debian-moreblue
│   ├── background.svg
│   ├── boundingbox.png
│   ├── debian-moreblue.xml
│   ├── espiral.svg
│   ├── GdmGreeterTheme.desktop
│   ├── icon-language.png
│   ├── icon-reboot.png
│   ├── icon-session.png
│   ├── icon-shutdown.png
│   ├── screenshot.png
│   └── userentry.png
├── happygnome
│   ├── background.svg
│   ├── GdmGreeterTheme.desktop
│   ├── gnome-logo.svg
│   ├── happygnome.xml
│   ├── options.png
│   └── screenshot.png
└── happygnome-list
    ├── background.svg
    ├── GdmGreeterTheme.desktop
    ├── gnome-logo.svg
    ├── happygnome.xml
    ├── options.png
    └── screenshot.png

5 directories, 30 files

After having a look at the different screenshot files, it looks like debian-moreblue is the one I need.

Cobbling together something

First, I’ll use lightdm-gtk-greeter-settings to change my login background to the one from the MoreBlue theme. I also change the GTK theme to “TraditionalOk” (a Clearlooks-inspired theme for GTK3) and the icon theme to “Human” (the old Ubuntu default icon theme). I know, this icon theme wasn’t used by Debian, but it just looks so good!

lightdm with the MoreBlue background

Still, the login box does not look vintage enough, and the top bar could be more discreet. At this time, I decided to learn how to theme GTK3 apps, and more specifically the LightDM GTK greeter. GTK themes are basically just CSS, and the layout of GTK applications is usually defined in XML files. So, here are the magic links to follow along:

The LightDM greeter has a simple enough structure (simplified, there’s a lot of stuff):

#panel_window
|- #menubar
   |- #power_menuitem
   |- #a11y_menuitem
   |- #language_menuitem
   |- #session_menuitem
   |- #layout_menuitem
   |- #clock_menuitem
   |- #host_menuitem
#login_window
|- #login_box
   |- #content_frame
      |- #grid1
         |- #user_image_border
            |- #user_image
         |- #user_combobox
         |- #username_entry
         |- #password_entry
      |- #content_area
         |- ...

First, let’s get rid of the background and border on the top-level login element:

#login_window {
	background-color: transparent;
	border-style: none;
}

Then, let’s change the background of the element right under it, as well as add a nice drop shadow and rounded corners:

#login_box {	
  background-color: rgba(255, 255, 255, 0.4);
	border-radius: 20px;
	box-shadow: 0px 0px 10px black;

	border-style: none;
}

Finally, we remove the top bar’s background, making it transparent:

#panel_window, #panel_window.background menubar {
	background-color: transparent;
	background-image: none;
}
final lightdm screenshot
It's like I'm back 13 years in the past!

Hey, that doesn’t look half bad! I’ve also changed the clock format to %a %d %b, %H:%M and the top bar indicators to:

  • Languages
  • Session
  • Power
  • Spacer
  • Clock

What could be better?

I’d love to find a way to move the top bar at the bottom. Unfortunately, it doesn’t look like that’s possible with the CSS exposed to themes. I would also like to put the espiral.png file in the bottom-right, just like in the original theme. It could simply be done by editing the background and adding the spiral manually.

Here are the files I used, if you want the same login prompt on you computer:

Send your comment via e-mail