[WIP] Gnome, gtk+ gnome-shell themes - ideas and findings

Hello,

In the past week or so i took a look at how the themes for Gnome are made and decided to give it a try. Opened an issue on github, but i would like some feedback and suggestions, or maybe simply drop the idea … I had drafted a few more themes trough different approaches, and combining things i liked, but i mostly end up in making dark themes. The reason i started this is because i prefer to have an unified look from login screen trough the entire interface, and some delimitation between elements, without heavy reading and also with some accents visible. Also because i prefer darker themes, i had a look at the Breath theme, but on Gnome it looks like this:

because it was made to work in a KDE environment …

Of course i like the Adapta one, but somehow is too rich in green in some situations (for my eyes), so …
After some time spent on how to make themes, i came to have this:

I can provide more screenshots, but maybe a test is way better. See the discussion i opened on github and where is also the file:

Edit:
I’m also working on this:

and this based on Manjaro Dark theme forum

But there are few touch-ups i have to make …

8 Likes

That looks really nice on my Arch Gnome system, but not the shell theme as it has no transparency, And transparency in the menu and drop down menus is for me a very big + point take away the flat feeling just gives Gnome a more pro look. try using moka gourmet for the shell and see what I mean.

2 Likes

I’ll look into it and see what can be done!
@mandog - question: Do you use the transparency even when the other windows touch the panel, or is only for the menus? can you share a screenshot too, so i can relate better (i’m more of a visual person) and sometimes the words are not enough :slight_smile:


As you can See I like a very clean desktop so everything stands out the top panel and dash to dock are fully transparent the drop-down menus just slight transparency, And yes transparent always top panel, Like you I have eye problems a dark for me i the best.

2 Likes

Off topic: Tutorial needed for change the forum to dark layout :blush: (in German preferred :hugs:)
Nice tubes and blue is my color Favorite

@SGS

4 Likes

Well, let me know how you feel about this transparencies in this gnome-shell theme for this dark theme:

https://github.com/manjaro/iso-profiles/files/1899553/gnome-shell_Manjaro_Breath_With_Transparency.zip

My apologize to provide the files this way, but yet i have to learn how to use github …
Let me know if goes well for you.
Cheers!

Edit: - a bit of update and a how to for those that don’t know how to change the noise-texture.png
In this files i didn’t provided the branded file that is a svg file. It is just some squares in a slight transparency mode, so it goes with whatever background color is defined, but it can be replaced.
Once you replace it and also want to use the gnome-shell-theme.gresource so also the login screen and lock screen looks the same as when you are on desktop, you have to either copy it on /usr/share/gnome-shell folder, or by creating a symlink to it.
If you changed something in the css file, or the texture i was mentioning, you have to recompile the binary file, the gnome-shell-theme.gresource, by running this command in that folder where the theme resides:
glib-compile-resources gnome-shell-theme.gresource.xml
because in that folder i provided also the gnome-shell-theme.gresource.xml that contain the information to be compiled in binary … Sorry if my text is not technical.
I will try to make a proper description in the future and see if i manage to create a proper way to maintain this, as we discussed on github

2 Likes

Thx so much, picture is best, plus arrow perfect. dont forget to save;)

That really looks fine God you are a fast worker and learner

3 Likes

PS The arrows are in German :wink: Sorry about the rest :smiley:

3 Likes

Now the only thing i have to find is how to personalize and maintain all this, also because the gnome-shell theme can be created separately, there might be a way to make one for all GTK+ good themes out there … Another thing i noticed is that some part of the theme can be changed by the extensions settings, overwriting the default theme. That is a good thing but also a bit confusing because as i was playing around, making some changes, those changes did not apply because i had some stuff enabled in the extensions i’m using … It will take some good amount of time to figure this out.
Really glad that you like the modification and integrates better to your UI.

A bit of update, and since i know more people are here than on github where the discussion started, i will also share here more information.
Ok, here is what i did, as mentioned previously. Used the Oomox but because i couldn’t get it work from source, i installed the one from AUR. Yet i don’t know the difference between oomox 1.6.1-4 and oomox-git 1.6.1-1 i installed the first one.
Then i downloaded the zip file of Materia theme
I do know how to clone it by using git command, but my purpose was different and i prefered this method.

  1. first thing to know is that oomox will install in /opt/oomox
    1a. inside the /opt/oomox/plugins there are the themes and some scripts, plus the icons
    1b. theme_materia and theme_oomox are where the src and assets are, but the materia one seems to be different that the one from source, and the second one is using the flatix and is a bit different.
    1c. in the same /opt/oomox/plugins folder i created there the folder theme_materia_master and copied the gtk_preview_css folder and oomox_plugin.py from theme_materia.
    1d. opened oomox_plugin.py with text editor and changed line 8 from this:
    THEME_DIR = os.path.join(PLUGIN_DIR, "materia-theme/")
    to
    THEME_DIR = os.path.join(PLUGIN_DIR, "materia-theme-master/")
    and then on lines 25-28 from:
class Plugin(OomoxThemePlugin):

    name = 'materia'
    display_name = 'Materia'

to this

class Plugin(OomoxThemePlugin):

    name = 'materia-master'
    display_name = 'Materia Master'

1e. copied the materia-theme-master inside the /opt/oomox/plugins/theme_materia_master folder, so now has the same structure as the one that comes with oomox, but the resutls are a bit different, as it seems some assets are different, and also the colors render a bit different.

  1. open up oomox GUI. Initially it would have only two sets of theme style, but because of the modifications i did now i have also the Materia Master, and it seems to give better results while rendering the theme.

  2. there are presets, as color presets, but i created mine, and are saved inside ~/.config/oomox/colors folder
    3a. those are simple text files and have all the settings made trough the GUI, so can be shared/modified and are responsible for the information given when the theme is exported/rendered and can be used by whatever Theme Style in the GUI.
    3b. not all color combinations look good, not for working with graphics or video
    3c. it seems that works best with monochromatic color harmonies and not very saturated. Color harmonies by triads look a bit strange, but i think can be achieved mostly for lighter combinations.

  3. export the theme will take a bit and can be tested right away from Gnome Tweak tool
    4a. there is a slight difference in the way gtk2 applications look like and the <gtk+ ones, visible in Gimp and Inkscape, that is why i edited the css to some degree, but is not ideal especially with my “experience” :smile:
    4b. even tho is using one style when exporting and preferably the Materia Master, i edit the way would look in the Numix (flatix ?)

This is the theme color file i was working on and finally got a coherent look. Once is saved in ~/.config/oomox/colors folder. It can have whatever name, and that name will show in the oomox GUI. I call it Manjaro_Breath

ACCENT_BG=1abc9c
BASE16_GENERATE_DARK=False
BG=232629
BTN_BG=202326
BTN_FG=1abc9c
BTN_OUTLINE_OFFSET=-3
BTN_OUTLINE_WIDTH=0
CARET1_FG=d4d4d4
CARET2_FG=d4d4d4
CARET_SIZE=0.04
CINNAMON_OPACITY=1.0
FG=d4d4d4
GNOME_SHELL_PANEL_OPACITY=0.0
GRADIENT=0.0
GTK3_GENERATE_DARK=False
HDR_BTN_BG=292f34
HDR_BTN_FG=d4d4d4
ICONS_ARCHDROID=26a88f
ICONS_DARK=2c3c36
ICONS_LIGHT=507b6b
ICONS_LIGHT_FOLDER=7fad9e
ICONS_MEDIUM=346655
ICONS_STYLE=gnome_colors
MATERIA_STYLE_COMPACT=True
MENU_BG=292f34
MENU_FG=d4d4d4
NAME=Manjaro_Breath
OUTLINE_WIDTH=3
ROUNDNESS=2
SEL_BG=1abc9c
SEL_FG=ffffff
SPACING=2
SPOTIFY_PROTO_BG=292f34
SPOTIFY_PROTO_FG=d4d4d4
SPOTIFY_PROTO_SEL=1abc9c
TERMINAL_ACCENT_COLOR=1abc9c
TERMINAL_BACKGROUND=202326
TERMINAL_BASE_TEMPLATE=tlight2
TERMINAL_COLOR0=000000
TERMINAL_COLOR1=93222d
TERMINAL_COLOR10=009846
TERMINAL_COLOR11=96a92b
TERMINAL_COLOR12=2692a1
TERMINAL_COLOR13=7d9b91
TERMINAL_COLOR14=1abc9c
TERMINAL_COLOR15=ffffff
TERMINAL_COLOR2=13b65d
TERMINAL_COLOR3=b0c141
TERMINAL_COLOR4=45b3ca
TERMINAL_COLOR5=8cb5a7
TERMINAL_COLOR6=37dabb
TERMINAL_COLOR7=abb0b5
TERMINAL_COLOR8=000000
TERMINAL_COLOR9=93222d
TERMINAL_FOREGROUND=d4d4d4
TERMINAL_THEME_ACCURACY=128
TERMINAL_THEME_AUTO_BGFG=True
TERMINAL_THEME_EXTEND_PALETTE=True
TERMINAL_THEME_MODE=manual
THEME_STYLE=materia-master
TXT_BG=292f34
TXT_FG=d4d4d4
UNITY_DEFAULT_LAUNCHER_STYLE=False
WM_BORDER_FOCUS=292f34
WM_BORDER_UNFOCUS=292f34

If you guys think is worth a try and have a idea how to keep it updated when the sources are updated, and make it work in a more automatic workflow, then is not a problem to have also different “themes”, even tho i now think is a misnomer to call it different theme, when in fact is just a color combination difference, but the assets are all the same.
Note: The gnome-shell theme needs to be edited in some cases, also, for the weather widget, if the Button Text is set to a color, then the weather will be displayed that way, but the workaround is to generate a copy of the theme, where is used white for the Button Text. Also the popup menu can be made transparent in the css file of the gnome-shell (as it seems some people like that). The tweaking can be done almost endlessly as there are many details. Also some parts of the theme are handled by the extensions (see the Dash-to-Dock or Dash-to-Panel). That also needs to be taken into consideration.

Feel free to test and report and/or get involved with more information.

Edit: Had some typos here and there and also i wanted to share the colors for Manjaro_Forum “theme”

ACCENT_BG=035f1d
BASE16_GENERATE_DARK=False
BG=373737
BTN_BG=545454
BTN_FG=35bf5c
BTN_OUTLINE_OFFSET=-3
BTN_OUTLINE_WIDTH=1
CARET1_FG=767676
CARET2_FG=545454
CARET_SIZE=0.04
CINNAMON_OPACITY=1.0
FG=eeeeee
GNOME_SHELL_PANEL_OPACITY=0.6
GRADIENT=0.0
GTK3_GENERATE_DARK=False
HDR_BTN_BG=767676
HDR_BTN_FG=fafafa
ICONS_ARCHDROID=035f1d
ICONS_DARK=545454
ICONS_LIGHT=338DD6
ICONS_LIGHT_FOLDER=35bf5c
ICONS_MEDIUM=009688
ICONS_STYLE=gnome_colors
MATERIA_STYLE_COMPACT=True
MENU_BG=767676
MENU_FG=e0e0e0
NAME=Manjaro_FORUM
OUTLINE_WIDTH=1
ROUNDNESS=3
SEL_BG=35bf5c
SEL_FG=fefefe
SPACING=3
SPOTIFY_PROTO_BG=373737
SPOTIFY_PROTO_FG=fafafa
SPOTIFY_PROTO_SEL=035f1d
TERMINAL_ACCENT_COLOR=35bf5c
TERMINAL_BACKGROUND=373737
TERMINAL_BASE_TEMPLATE=tempus_future
TERMINAL_COLOR0=000000
TERMINAL_COLOR1=93222d
TERMINAL_COLOR10=35bf5c
TERMINAL_COLOR11=ffd260
TERMINAL_COLOR12=338DD6
TERMINAL_COLOR13=ff81a1
TERMINAL_COLOR14=81acd6
TERMINAL_COLOR15=fafafa
TERMINAL_COLOR2=35bf5c
TERMINAL_COLOR3=ffd260
TERMINAL_COLOR4=338DD6
TERMINAL_COLOR5=ff9089
TERMINAL_COLOR6=81acd6
TERMINAL_COLOR7=fafafa
TERMINAL_COLOR8=000000
TERMINAL_COLOR9=93222d
TERMINAL_FOREGROUND=35bf5c
TERMINAL_THEME_ACCURACY=122
TERMINAL_THEME_AUTO_BGFG=True
TERMINAL_THEME_EXTEND_PALETTE=True
TERMINAL_THEME_MODE=manual
THEME_STYLE=materia-master
TXT_BG=373737
TXT_FG=767676
UNITY_DEFAULT_LAUNCHER_STYLE=False
WM_BORDER_FOCUS=373737
WM_BORDER_UNFOCUS=767676
3 Likes

I liked your theme, a lot!! Great work!

If you need help with git and github I may help you, I’m not a expert, but I know a thing or two about git

1 Like

Thanks a lot! I will ask you some questions once i know what questions to ask, as for now i’m totally off when comes to the way github works and how i can “merge” 2 different projects and make use of them, so the delivery of this proposed “theme” or others to come, will get updated as the source from master is updated …

Now i’m investigating how the Adapta theme is done, as it has different assets and “namings” too, and the way it renders the colors by a use of some mixing (very interesting and appealing), but is more complex and has only scripts and sass stuff (i’m zero at that).

1 Like

Since I saw that you wanted to fork the project, the one you used as code base, it’s quite simple in github.
You just need a account, that you have, go to the project page and click in the fork button on the top right of the project page.

You said you’re more of a visual guy, here:

2 Likes

Yes, but that’s another thing i don’t yet understand, if that is necessary to fork the oomox too, or just make the use of materia theme and make use of those colors just with the materia-theme-master ?
It seems that oomox is “injecting” those colors in the render script … but someone that know exactly how this works might just use the colors file and that’s it.

Update related to the gnome-shell changes in Gnome 3.34; "manjarofy" the GDM theme so it doesn't break, and properly work with Adwaita-Maia done by @Chrysostomus

  1. I 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 marked as executable.

  1. from terminal i run ./extract.sh

  2. i generate the gnome-shell-theme.gresource.xml from a tree terminal command, so i get the exact structure that exists in the original one.
    This is the content of it:

<?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>
  1. replace all the Adwaita "blue" variants as follow:
    4a. Replace in gnome-shell.css
    #1b6acb with #16a085
    #092444 with #359385
    #629fea with #1cceab
    #8fbbf0 with #1ee2bb
    rgba(27, 106, 203, with rgba(22, 160, 133,
    #1f76e1 with #18ae91
    rgba(188, 214, 246, with rgba(188, 246, 204,
    rgba(143, 187, 240, with rgba(229, 251, 231,
    #185fb4 with #138971
    #3584e4 with #24c891
    #1d72d8 with #17ab8e
    #1a66c2 with #14906e
    #15539e with #1b7a61
    4b. gnome-shell-high-contrast.css
    #215d9c with #138971
    #0f2b48 with #2f4d3c
    #4a90d9 with #1db98e
    #74aae2 with #2fdeae
    rgba(33, 93, 156, with rgba(19, 137, 113,
    #256ab1 with #14906e
    rgba(158, 196, 235, with rgba(188, 246, 204,
    rgba(116, 170, 226, with rgba(47, 222, 174,
    #1c5187 with #138971
    #2a76c6 with #17ab8e
    #2365a9 with #1f7a61
    #1f5894 with #138971
    #184472 with #1b7a61
    4c. the assets svg files:
    #0b2e52 with #244e37
    #1862af with #138971
    #3465a4 with #3b7666
    #006098 with #1f7a61
    #2b73cc with #17ab8e
    #3081e3 with #24c891
    #15539e with #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.

  1. i then 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

Now i have a perfectly working Adwaita-Maia GDM theme. I can use whatever other user theme for when i log in. Is not breaking the search, nor the use of another user shell theme.

I'll talk to @Ste74 and @Chrysostomus to see if my approach can be automatized, and also for the files themselves.

More updates:
Apparently the first script to extract the gresources is using the $HOME, so in the end we get an extra folder of icons. The correct extract script, to point to the original gresource file (for the GDM theme) is to use this script:

#!/bin/sh

workdir=${PWD}

if [ ! -d ${workdir}/theme ]; then
  mkdir -p ${workdir}/theme
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

Addition:
Proper recolor.sh:

#!/bin/bash
find . -type f -name '*.svg' -exec sed -i \
    "s/#2c1cff/#16a085/Ig;\
    s/#0000ff/#16a085/Ig;\
    s/#0b2e52/#244e37/Ig;\
    s/#1862af/#138971/Ig;\
    s/#3465a4/#3b7666/Ig;\
    s/#006098/#1f7a61/Ig;\
    s/#2b73cc/#17ab8e/Ig;\
    s/#3081e3/#24c891/Ig;\
    s/#15539e/#1b7a61/Ig" {} \;

find . -type f -name '*.css' -exec sed -i \
    "s/#215d9c/#138971/Ig;\
    s/#0f2b48/#2f4d3c/Ig;\
    s/#4a90d9/#1db98e/Ig;\
    s/#74aae2/#2fdeae/Ig;\
    s/rgba(33, 93, 156/rgba(19, 137, 113/g;\
    s/#256ab1/#14906e/Ig;\
    s/rgba(158, 196, 235/rgba(188, 246, 204/g;\
    s/rgba(116, 170, 226/rgba(47, 222, 174/g;\
    s/#1c5187/#138971/Ig;\
    s/#2a76c6/#17ab8e/Ig;\
    s/#2365a9/#1f7a61/Ig;\
    s/#1f5894/#138971/Ig;\
    s/#184472/#1b7a61/Ig;\
    s/#1b6acb/#16a085/Ig;\
    s/#092444/#359385/Ig;\
    s/#629fea/#1cceab/Ig;\
    s/#8fbbf0/#1ee2bb/Ig;\
    s/rgba(27, 106, 203/rgba(22, 160, 133/g;\
    s/#1f76e1/#18ae91/Ig;\
    s/rgba(188, 214, 246/rgba(188, 246, 204/g;\
    s/rgba(143, 187, 240/rgba(229, 251, 231/g;\
    s/#185fb4/#138971/Ig;\
    s/#3584e4/#24c891/Ig;\
    s/#1d72d8/#17ab8e/Ig;\
    s/#1a66c2/#14906e/Ig;\
    s/#15539e/#1b7a61/Ig" {} \;

and can be build without the icons folder:

<?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>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>

Edit for more updates:
For GDM theme the Cancel button requires intervention to match the rest, so this are the colors that need to be replaced:

#5b666a > #5f5f5f
#667478 > #6f6f6f
#4f595d > #4f4f4f
5 Likes

Forum kindly sponsored by