10

I upgraded to Fedora 21, which spotlights GNOME 3.14 (plus the relevant GTK+ material). Unfortunately it seems that this particular update mangles a lot of my older themes, written for now-aging versions of GNOME 3. Where previously they may have squeaked by, they now look a little out-of-place.

I don't presume to re-invent the wheel: I would be very happy to take a pre-existing CSS template (e.g. the default Adwaita 3.14 spec) and tweak it here and there to my liking; there will be no fancy flying. Imagine the hair I tore out when I peeked at /usr/share/themes/Adwaita/gtk-3.0/gtk.css:

/* Adwaita is the default theme of GTK+ 3, this file is not used */

That puts me in a pickle. I lack the Google-fu to dig the documentation up about where this might be (worse, I have a gut feeling this is something implicitly obvious to GNOME people that I have been missing out on), and for some reason the GNOME developer website resists my attempts at researching their theming specification.

In short, I'd like to find a virgin theme specification for GNOME 3.14, assuming one is extant. How may I do this, or how may I modify my approach?

2 Answers 2

15

There's only a single line in that .css file because the default theme Adwaita comes as a binary:

Adwaita is a complex theme, so to keep it maintainable it's written and processed in SASS, the generated CSS is then transformed into a gresource file during gtk build and used at runtime in a non-legible or editable form.


For gnome 4.* per the README:

How to tweak the theme


Default is a complex theme, so to keep it maintainable it's written and processed in SASS. The generated CSS is then transformed into a gresource file during gtk build and used at runtime in a non-legible or editable form.

It is very likely your change will happen in the _common.scss file. That's where all the widget selectors are defined. Here's a rundown of the "supporting" stylesheets, that are unlikely to be the right place for a drive by stylesheet fix:

_colors.scss - global color definitions. We keep the number of defined colors to a necessary minimum, most colors are derived from a handful of basics. It covers both the light variant and the dark variant.

_colors-public.scss - SCSS colors exported through gtk to allow for 3rd party apps color mixing.

_drawing.scss - drawing helper mixings/functions to allow easier definition of widget drawing under specific context. This is why Default isn't 15000 LOC.

_common.scss - actual definitions of style for each widget. This is where you are likely to add/remove your changes.

You can read about SASS at http://sass-lang.com/documentation/. Once you make your changes to the _common.scss file, GTK will rebuild the CSS files.

Also, check the guidelines present in Default-light.scss and Default-dark.scss:

// General guidelines:
// - very unlikely you want to edit something else than _common.scss
// - keep the number of defined colors to a minimum, use the color blending functions
// if you need a subtle shade; - if you need to inverse a color function
// use the @if directive to match for dark $variant

In the same git directory (Default) you'll find the files
_common.scss, _colors.scss, _colors-public.scss and _drawing.scss


For gnome 3.*:
Since the code has been included in gtk+, you can view the source files HERE. As per their readme:

_colors.scss        - global color definitions. We keep the number of defined colors to a necessary minimum, most colors 
                      are derived form a handful of basics. It covers both the light variant and the dark variant.
_colors-public.scss - SCSS colors exported through gtk to allow for 3rd party apps color mixing.
_drawing.scss       - drawing helper mixings/functions to allow easier definition of widget drawing under specific context.
                      This is why Adwaita isn't 15000 LOC.
_common.scss        - actual definitions of style for each widget. This is where you are likely to add/remove your changes.

In the same git directory (Adwaita) you can find the _*.scss files mentioned above and the reference schemes:

gtk-contained.css
gtk-contained-dark.css

3
  • It looks like some kind of Gitlab repo reorganization happened, if you try and click the links to view the source it will tell you that you need to log in, for some reason it seems like that's how they handle dead links, either that or they made the gtk+ repo private whereas what actually seemed to happen is they just renamed gtk+ to gtk or something. In any case, that's not quite enough, in addition to that you also have to go back in time a bit, because the themes folder seems to have been moved somewhere else (I was not able to locate it in the latest version).
    – jrh
    Commented Dec 28, 2022 at 18:54
  • 1
    ... I poked around with the history on the folder it used to be in and found an old version of the css file here gitlab.gnome.org/GNOME/gtk/-/blob/… which is good enough of a hint for me -- I recommend always putting commit hashes in your github/gitlab url links from now on because things change and devs love to rename folders / move stuff around, it might make things a little less brittle 8 years later.
    – jrh
    Commented Dec 28, 2022 at 18:55
  • @jrh - well, this is an old post of mine... and I no longer use Gnome (as we moved to KDE some 4 years ago)... not much I can do other than adding some new links to my post, I hope they'll help future visitors. Everyone feel free to edit the post with updates/improvements. Commented Dec 28, 2022 at 21:12
1

I'm copying my own TLDR here from a similar question about window topbar colors

~/.config/gtk-3.0/gtk.css

    /* REMOVE "-dark" IF USING LIGHT THEME */
    @import url("resource:///org/gtk/libgtk/theme/Adwaita/gtk-contained-dark.css");
    
    /* THIS ONE CHANGES TITLEBAR COLOR */
    headerbar.titlebar,
    headerbar.titlebar:active {
        background:#3F51B5;
    }
    
    /* THIS CHANGES NAUTILUS SEARCH BAR */
    .horizontal.path-bar-box,
    row:selected:backdrop {
         background:#3F51B5;
         border-color:#3F51B5;
    }

To debug and find fitting CSS Selectors, open a GTK3 app with environment variable GTK_DEBUG=interactive. For example,

GTK_DEBUG=interactive nautilus

This should open a inspector for the GTK window. If it's not there, press Ctrl+Shift+I.

screenshot of inspector

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .