How to set a custom Gnome-shell theme? about cubic HOT 6 CLOSED

Select a theme that supports Gnome Shell

The theme you chose must meet one of the following requirements:

1. Your theme file must contain a gnome-shell-theme.gresource.xml file and a gnome-shell.css file.

2. If your theme already comes with a pre-compiled gnome-shell-theme.gresource file, it may work with Gnome Shell.

If the theme you selected does not meet at least one of the above requirements, it can not be used with Gnome Shell.

Execute the following in Cubic's Terminal page

(a) Install the theme

1. Install your selected theme. For this example, we will use the Materia theme.

   apt-add-repository universe
   apt install materia-gtk-theme
   

   The theme files should be installed to /usr/share/themes.

   Note, the installation instructions for your theme may be different. In this example, Materia theme has a package available for Ubuntu.

(b) Apply the Desktop theme (Window Decorations & Widgets)

1. Create a gschema override file.

   cd /usr/share/glib-2.0/schemas
   nano 90_ubuntu-settings.gschema.override
   

2. Add the following to this file.

   [org.gnome.desktop.interface:ubuntu]
   gtk-theme = "Materia"
   

   (You may include other gsettings schemas, keys, and values in this file as as necessary for your customizations).

3. Save the file and exit nano.

   Ctrl+X, Y, Enter

4. Compile the gschema override file.

   glib-compile-schemas /usr/share/glib-2.0/schemas/
   

(c) Create a gresource file for Gnome Shell (Top Bar, Dock, Lock Screen) & GDM (Login Screen)

• If the theme contains a gnome-shell-theme.gresource.xml file and a gnome-shell.css file, proceed with this step.
• If the theme already contains gnome-shell-theme.gresource file, skip to step (d).

1. Change to your selected theme's gnome-shell directory (i.e. the directory that contains the gnome-shell-theme.gresource.xml file).

   cd /usr/share/themes/Materia/gnome-shell
   

2. Check if the GDM *.css file is already specified by your theme.

   cat gnome-shell-theme.gresource.xml | grep "gdm[3]*.css"
   

   (Note, Ubuntu 20.04 or 21.04 require gdm3.css, and Ubuntu 21.10+ requires gdm.css).

3. If you do not see a result from the above command, edit gnome-shell-theme.gresource.xml.

   nano gnome-shell-theme.gresource.xml
   

   Below the line <file>gnome-shell.css</file>, add the two lines for gdm3.css and gdm.css as shown.

       <file>gnome-shell.css</file>
       <file alias="gdm3.css">gnome-shell.css</file>
       <file alias="gdm.css">gnome-shell.css</file>
   

   (Note, Ubuntu 20.04 or 21.04 require gdm3.css, and Ubuntu 21.10+ requires gdm.css).

4. Make a backup of the current gresource file.

   cd /usr/share/gnome-shell
   mv gnome-shell-theme.gresource gnome-shell-theme.gresource.original
   

5. Install the following package, required for the glib-compile-resources command.

   apt install libglib2.0-dev-bin
   

6. Compile the gresource file.

   cd /usr/share/themes/Materia/gnome-shell
   glib-compile-resources --target="/usr/share/gnome-shell/gnome-shell-theme.gresource" gnome-shell-theme.gresource.xml
   

(d) Verify the compiled theme file is available

1. Verify that the gnome-shell-theme.gresource file exists.

   cd /usr/share/gnome-shell
   ls -la
   

   • If your theme already contained a gnome-shell-theme.gresource file, make sure it was placed in /usr/share/gnome-shell during installation.
   • If you generated this file in step (c), check its timestamp to make sure it is a new file.

(e) Apply the Gnome Shell theme (Top Bar, Dock, Lock Screen)

1. Edit modes/ubuntu.json.

   This applies the theme in the Live Session and the installed user sessions.

   cd /usr/share/gnome-shell
   nano modes/ubuntu.json
   

2. Set the values of stylesheetName and themeResourceName as shown.

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

3. Save the file and exit nano.

   Ctrl+X, Y, Enter

4. Edit modes/ubiquity.json.

   This applies the theme in the Live Session when the "Try Ubuntu / Install Ubuntu" dialog is displayed.

   cd /usr/share/gnome-shell
   nano modes/ubiquity.json
   

5. Set the values of stylesheetName and themeResourceName as shown.

   {
       "hasWindows": true,
       "components": ["polkitAgent", "networkAgent"],
       "stylesheetName": "gnome-shell.css",
       "themeResourceName": "gnome-shell-theme.gresource",
       "panel": { "left": [],
                  "center": ["dateMenu"],
                  "right": ["a11y", "keyboard", "aggregateMenu"]
       }
   }
   

6. Save the file and exit nano.

   Ctrl+X, Y, Enter

(f) Apply the GDM theme (Login Screen)

• If you are using Ubuntu 20.04 or 21.04, use the following command to set the GDM theme.

  update-alternatives --set gdm3-theme.gresource /usr/share/gnome-shell/gnome-shell-theme.gresource
  

  • You can verify the current setting using the following command.

    update-alternatives --query gdm3-theme.gresource
    

  • The output will look like this. Note the Value line in the output.

    Name: gdm3-theme.gresource
    Link: /usr/share/gnome-shell/gdm3-theme.gresource
    Status: manual
    Best: /usr/share/gnome-shell/theme/Yaru/gnome-shell-theme.gresource
    Value: /usr/share/gnome-shell/gnome-shell-theme.gresource
    
    Alternative: /usr/share/gnome-shell/gnome-shell-theme.gresource
    Priority: 10
    
    Alternative: /usr/share/gnome-shell/theme/Yaru/gnome-shell-theme.gresource
    Priority: 15
    

• If you are using Ubuntu 21.10+, use the following command to set the GDM theme.

    update-alternatives --set gdm-theme.gresource /usr/share/gnome-shell/gnome-shell-theme.gresource
  

  • You can verify the current setting using the following command.

    update-alternatives --query gdm-theme.gresource
    

  • The output will look like this. Note the Value line in the output.

    Name: gdm-theme.gresource
    Link: /usr/share/gnome-shell/gdm-theme.gresource
    Status: manual
    Best: /usr/share/gnome-shell/theme/Yaru/gnome-shell-theme.gresource
    Value: /usr/share/gnome-shell/gnome-shell-theme.gresource
    
    Alternative: /usr/share/gnome-shell/gnome-shell-theme.gresource
    Priority: 10
    
    Alternative: /usr/share/gnome-shell/theme/Yaru/gnome-shell-theme.gresource
    Priority: 15
    

Generate the customized ISO and test

1. Navigate through the pages in Cubic until you reach the Finish page.
2. Test the generated ISO using the Test button in Cubic, a virtual machine, or USB stick.

from cubic.

Will give it a try when I get a chance. Thanks for the help.

from cubic.

From your other question, I see that you are customizing Ubuntu 20.04.

Are you creating your own theme, or are you installing an existing theme that you want to use as your Gnome Shell theme? If existing theme, which theme and what is the download link or apt package you are using (so I can try with the same theme)?

from cubic.

I use a combination of different parts of themes. Right now I'm using Gnome-professional-40-dark for the shell theme and WhiteSur-dark-solid for applications. The icons are Mkos-Big-Sur-Night. I want to make my own but haven't found any good instructions on how to make themes for gnome.

from cubic.

I was wondering how to get a custom gnome-shell theme active on live iso file?

I wanted to know the same?

from cubic.

One way to do it is to use the User Themes extension, and enable it as I have described in issue #10.

However, there is a nicer way to do this, that does not rely on an extension. It will take me a few days to write it up, and I'll share it as soon as I can.

from cubic.