[How To] User level of modifying GDM theme

Difficulty: ★★☆☆☆

Many users find themselves in the situation that their custom theme is not matching satisfactory, for their aesthetics, the GDM theme, or simply what to change the accent colors of the default GDM theme installed. Since GDM is using *.gresource file, a direct edit to it is not possible and needs to be extracted first, and then recompiled. Here is how you can do that:

  1. Use this shell script to extract the original GDM theme.

    #!/bin/sh
    gst=/usr/share/gnome-shell/gnome-shell-theme.gresource
    workdir=${HOME}/shell-theme
    
    for r in `gresource list $gst`; do
    	r=${r#\/org\/gnome\/shell/}
    	if [ ! -d $workdir/${r%/*} ]; then
    	  mkdir -p $workdir/${r%/*}
    	fi
    done
    
    for r in `gresource list $gst`; do
            gresource extract $gst $r >$workdir/${r#\/org\/gnome\/shell/}
    done
    

    saved as extract.sh and make it executable:
    chmod +x extract.sh

  2. Extract the resource files by running from terminal:
    ./extract.sh

  3. Generate the gnome-shell-theme.gresource.xml from a tree terminal command, to get the exact structure that exists in the original one. (this part might require a revision to make things easier)
    Example of such structure:

    <?xml version="1.0" encoding="UTF-8"?>
    <gresources>
      <gresource prefix="/org/gnome/shell/theme">
        <file>calendar-today.svg</file>
        <file>checkbox-focused.svg</file>
        <file>checkbox-off-focused.svg</file>
        <file>checkbox-off.svg</file>
        <file>checkbox.svg</file>
        <file>dash-placeholder.svg</file>
        <file>gnome-shell-high-contrast.css</file>
        <file>gnome-shell.css</file>
        <file>icons/message-indicator-symbolic.svg</file>
        <file>icons/pointer-double-click-symbolic.svg</file>
        <file>icons/pointer-drag-symbolic.svg</file>
        <file>icons/pointer-primary-click-symbolic.svg</file>
        <file>icons/pointer-secondary-click-symbolic.svg</file>
        <file>key-enter.svg</file>
        <file>key-hide.svg</file>
        <file>key-layout.svg</file>
        <file>key-shift-latched-uppercase.svg</file>
        <file>key-shift-uppercase.svg</file>
        <file>key-shift.svg</file>
        <file>no-events.svg</file>
        <file>no-notifications.svg</file>
        <file>noise-texture.png</file>
        <file>pad-osd.css</file>
        <file>process-working.svg</file>
        <file>toggle-off-dark.svg</file>
        <file>toggle-off-hc.svg</file>
        <file>toggle-off.svg</file>
        <file>toggle-on-dark.svg</file>
        <file>toggle-on-hc.svg</file>
        <file>toggle-on.svg</file>
      </gresource>
    </gresources>
    
  4. Replace all the Adwaita “blue” variants as follow:

  • 4a. gnome-shell.css replacement example
    #1b6acb > #16a085
    #092444 > #359385
    #629fea > #1cceab
    #8fbbf0 > #1ee2bb
    rgba(27, 106, 203, > rgba(22, 160, 133,
    #1f76e1 > #18ae91
    rgba(188, 214, 246, > rgba(188, 246, 204,
    rgba(143, 187, 240, > rgba(229, 251, 231,
    #185fb4 > #138971
    #3584e4 > #24c891
    #1d72d8 > #17ab8e
    #1a66c2 > #14906e
    #15539e > #1b7a61

  • 4b. gnome-shell-high-contrast.css example
    #215d9c > #138971
    #0f2b48 > #2f4d3c
    #4a90d9 > #1db98e
    #74aae2 > #2fdeae
    rgba(33, 93, 156, > rgba(19, 137, 113,
    #256ab1 > #14906e
    rgba(158, 196, 235, > rgba(188, 246, 204,
    rgba(116, 170, 226, > rgba(47, 222, 174,
    #1c5187 > #138971
    #2a76c6 > #17ab8e
    #2365a9 > #1f7a61
    #1f5894 > #138971
    #184472 > #1b7a61

  • 4c. the assets svg files from that folder example:
    #0b2e52 > #244e37
    #1862af > #138971
    #3465a4 > #3b7666
    #006098 > #1f7a61
    #2b73cc > #17ab8e
    #3081e3 > #24c891
    #15539e > #1b7a61

    Important Note: All the replacement is done, in all files, from a text editor. Using inkscape to directly edit the svg files will render them unusable for the theme in most cases.

  1. Generate the *.gresource file with this terminal command in the same folder:
    glib-compile-resources gnome-shell-theme.gresource.xml

  2. Copy the theme to the correct folder:

    sudo cp gnome-shell-theme.gresource '/usr/share/gnome-shell/gnome-shell-theme.gresource'
    
  3. restart the shell with Alt+F2

This should result in a perfectly working Adwaita-Maia GDM theme, because all the color replacements are done with the Manjaro green touch. You can create your custom GDM theme that is not breaking the search, nor requires the use of another user shell theme with your preferred color combinations. It will take some time, but you will probably be satisfied in the end with the result.

Important note:

Always use the default GDM theme -from gnome-shell package, and not the manjaro-gdm-theme to start this quest/experiment. :slight_smile:

6 Likes

Very helpful :pray:

1 Like

thanks for make this tutorial!

i will give it a try on my laptop and if i manage to do it fine i will do it on my desktop pc :grin:

PSA

If you know what you want to replace, such as all blue for yellow then you can use sed.

sed -i "s/"'ORIGINAL'"/"'REPLACEMENT'"/gI" FILE

examples:

sed -i "s/"'(188, 214, 246)'"/"'(188, 246, 204)'"/gI" gnome-shell.css
sed -i "s/"'1c5187'"/"'138971'"/gI" gnome-shell-high-contrast.css
2 Likes