Support third party GTK+ themes

[rafaelmardojai]

As we have seen (#37 & #46) we lack support to non-Adwaita themes. Here I propose some changes to create a way to support these themes.

Approach 1: Basic "GNOME" styles separated from themes ones

core.css: Base GNOME look and feel styles.

adwaita-base.css: Base Adwaita look and feel styles. adwaita-dark.css & adwaita-light.css: Adwaita themes (variables storage).

adapta-base.css: Base Adapta look and feel styles. adapta.css, adapta-nokto.css, adapta-eta.css, adapta-nokto-eta.css: Adapta themes (variables storage).

(Every theme can have different variables)

Approach 2: Just override Adwaita styles as needed

core.css: Base Adwaita look end feel styles (like the one we have now). gnome-dark.css & gnome-light.css: Adwaita themes (variables storage, the same as now).

adapta-base.css: Base Adapta look and feel styles, overrides core.css rules as needed, defines new variables as needed. adapta.css, adapta-nokto.css, adapta-eta.css, adapta-nokto-eta.css: Adapta themes (variables storage).

---

What do you think is the way to go? Let me know.

[lunakurame]

That sounds ok, but when I try to imagine what should go in the new core.css file, I end up with just everything we already have in the theme.css file. Adapta and elementary's theme really are just flat versions of Adwaita, all code in theme.css should apply to them too and the only thing that changes are the CSS variables we define in theme variant files: gnome-<version>-<light/dark>.css. We don't have an Adapta variant, because nobody wrote it yet, but I don't see anything stopping us from doing it. Are there any specific parts of theme.css which you think make it necessary to split Adwaita and Adapta into separate files?

If there are some small differences, we can just add more CSS variables. If the differences are too big, it might be necessary to do what you proposed, but currently I don't see those differences. Both themes have a headerbar, both themes have square buttons and behave the same way, we have CSS variables for button background, borders, margins, radius, so those things already can be adjusted. The only things that break are icons. We might be able to make icon colors more consistent if we fix issue #44, not sure about loading custom icons yet since Firefox has a lot of nasty JavaScript which would break our icons (animated reload and download buttons).

[rafaelmardojai]

Maybe i overthink it a bit xD.

But for example csd-elementary.css is a theme specific fix (maybe the only one who needs this kind of fixes), and it should be included automatically if the user choose the elementary theme.

What do you think of this behavior? elementary-loki-light.css:

@import "parts/core.css";
@import "parts/elementary-theme.css"; /* Theme specific core modifications */
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* Colors */
:root {
    /* Theme variables */
}

I just want to make things clear for any new contributor.

[rafaelmardojai]

I was looking the most popular gtk themes (Adapta, Arc, Communitheme, etc), and started playing around Arc theme.

For example it needs:

• Modify headerbar height
• Modify buttons padding/height
• Modify window controls separator height
• Use custom icons on window controls
• Etc

To solve this, we can just add a few new variables to better manage backgrounds, borders, shadows and colors of these (if needed). And if a theme has more requirements, can be created a parts/themename-theme.css file as i explained in my previous comment.

---

So with this well defined, someone interested can help us to support those themes, (i really have no interest on third party themes xD).

I am closing this, if someone wants support for a theme, please open a separate issue.