Orthogonal 2

From the experience of orthogonal-markers comes orthogonal2. Same idea, slightly better implemented. Best improvement: Now installing the theme can be done as any other theme. However, it is not possible to link its orthogonal2/gtk-4.0/gtk.css from ~/config/.gtk-4.0, which means it can't be easily used to apply the style to libadwaita (mainly Gnome) apps. However, it is still possible to set the environment variable GTK_THEME=orthogonal2 and then all GTK apps, including libadwaita apps, will be force to use this theme (although then only the color scheme set for "light" (aka default) will work, not the dark one). I use this trick, usually.

orthogonal2 is a simple framework to develop pure CSS gtk3 and gtk4 themes, with optional accompanying gtk-2.0, xfwm4, metacity-1, labwc, cinnamon, gnome-shell, and openbox-3. Sadly, these other themes can't be currently made to follow the selected color scheme. I'll try to make it as automatable as possible in the future (see TODO).

It already contains a few themes ("general aspect") and color schemes that can be applied to each theme. As of writing this README, it has 19 themes, and 83 color schemes (some dark, some light).

Now why orthogonal, you say? Because the idea is to create a CSS code that is as simple as possible, and because, like any programmer, I don't like repeating code, and because I love that each function and state are clearly readable from the aspect of a control. Since I won't be using SASS or any other CSS preprocessor, then each function and state need as much orthogonality as possible, that is: I use different CSS properties to mark each state (be it hover, active, checked, disabled...). CSS does not have so many properies, therefore it's not a very easy task. And in fact some of the themes included break this goal (which require me to add extra CSS to account for different combinations of states, typically).

Installation

You can just copy or link the base directory in the user's theme directory (~/.local/share/themes (preferred) or ~/.themes (deprecated)).

cd ~/.local/share/themes
ln -s ~/Themes/gtk/orthogonal2

Done this way, each time you change orthogonal2's theme or color scheme, it will work immediately with new apps (I still haven't tried the trick to force all GTK apps to redraw with the new theme). Also, because this is all pure CSS, you don't have to compile anything.

Configuring orthogonal2 with themes and color themes

There are two scripts that allow this:

• set_theme.sh: it allows you to select which of the themes to use (hitech, aero, flat-trend, retrofuturist, glossy...)
• set_color_scheme.sh: it lets you select which color scheme to use for a certain theme (and it only affects that theme). You indicate both the light and dark color variants. Note: "light" and "dark" color variants means the following: by default, GTK apps use the "light" variant, and some apps (like gedit, firefox, inkscape...) prefer using the "dark" variant. What the script allows you to do is to select the color scheme for "light" and for "dark" variants, but you can use any color scheme (hitech uses a not-very-dark color scheme for "light" variant, and a darker one for "dark" variant, or retrofuturist uses the same dark-Retrofuturist.css for both "light" and "dark" variants). There are currently 89 color schemes at the time of writing this! 😎

Creating new color schemes

It's very easy: just copy on of the CSS files in orthogonal2/base/color_schemes to a new file name and edit it! Then you need to activate it the set_color_scheme.sh script.

Creating new themes

This is of course a bit more complicated, and requires you to know a bit of CSS and how the GTK CSS works (here for gtk-3, here for gtk-4). But of course, the best thing is to use one of the preexisting themes and tweak it:

1. copy one of the directories of orthogonal2/themes to a new name
2. usually you'll just edit the files in orthogonal2/themes/your_theme/gtk-4.0 because most of the files in orthogonal2/themes/your_theme/gtk-3.0 are links to the ones in gtk-4.0 (this is because most of the CSS code is valid for both GTK versions, so no need to duplicate). Some files, however, are not links, because they need to be different for each GTK version.
   • You'll notice that orthogonal2/themes/your_theme/gtk-4.0 has two types of file names: the ones that start with 00ow and the other ones (that I'll call base ones). This is because the idea is: all the base files define what is the base theme (a lot of CSS code that is mainly common among all themes, plus the typical things you want to customize, such as the appearance of buttons, entries...), which are then overwritten by all the 00ow* files. This way, whenever I want to make an improvement that affects all files, I do it on the base files, and what each theme does is overwrite the base theme with its 00ow.
   • Bear in mind that most of the 00ow files are loaded after the base ones, so that CSS selectors with equal specificity actually overwrite. However, you might want to check the base ones for certain specificities. The CSS responsible for loading the files is whole-thing.css.
   • The base theme is a quite dull skeuomorphic theme. If you empty all the 00ow files, that's what you'll get: a working dull skeuomorphic theme (dull is not necessarily bad!)
   • You can learn how to create a new theme by seeing how I've created all the other ones

Using git

The best way to use this theme is cloning the git repository:

cd ~/Themes/gtk #just an example
git clone https://git.disroot.org/eudaimon/orthogonal2

This way, updating it is straightforward:

cd ~/Themes/gtk/prthogonal2
git pull

Note that if you have added more themes, color schemes, or changed color schemes, I'd recommend to first commit these changes (except usually the color schemes and the links to the selected theme), then pull. Something like:

git add themes/new_theme # or any other file/directory you wish to incorporate permanently
git commit -m "Added new_theme"
git pull # if there is a conflict between my update and your commit, git will try to solve it, and it might ask you for some action

Previews

All these previews show the default color scheme for each theme. But there are plenty of color schemes to chose from, and you can create new ones!

Note: most previews have been done while I was using the buuf-nestort icon theme . That's why you see a drawn hamburger in the menu icon and also some other funny drawn symbols on other buttons. A more conventional icon theme will look more integrated, actually, with most themes. I only realized after having made all the screenshots. I might update the previews with a more suitable icon theme.

Default

Default theme is flat-trend with dark-easy-draculish.css for both "light" and "dark" variants. This theme does something really unique, too: toggleable buttons or controls (like tabs) have a subtle dashed border to indicate this.

Other

Still a work in progress

But it has already gone a long way! It's very usable (especially GTK3 and GTK4), and does a decent job in superceding libadwaita. It's a daily driver for me, and if you notice any error or issue with one particular program, I encourage you to create an issue, so I can correct it.

TODO

• Add Nemo support (See this and this)
• Python script that allows you to chose a light and dark theme, (for gtk.css and gtk-dark.css) and which also adapts GTK2 theme and maybe any other theme other than gtk-3.0 and gtk-4.0. Not easy!
• Maybe it could also provide a qt(5|6)ct color scheme, Plasma color scheme, although it would have to deal with CSS named colors somehow.
• Maybe offer the possibilty to also manage different gtk2 themes, or xfwm4 themes, or the other supported ones, for that matter.
• what about Aurorae (svg) themes, and Kvantum (svg) themes for Plasma?
• ability to install all the themes and/or color schemes that do not go to ~/.local/share/themes
• Update the previews with a more suitable icon theme