How to get normal Ubuntu orange color in window titlebar using Human-Clearlooks theme?

Solution 1:

Human-Clearlooks needs GTK+3 support to be useful.

With some efforts, the legacy theme can be adapted and can be used in newer releases of Ubuntu and the derivatives. The title bar with Human theme however, will only be visible when Metacity window manager is used.

Useless warning: Some window managers may not show the title bar with Human theme at all. For GTK+ desktop environment, if the client-side decoration a.k.a. header bars in GNOME is used by default, user might want to disable that and replace with title bar for desired appearance. Hence this useless warning or the warning of becoming useless (pun included).

The following instructions will assume that:

• user has installed the required packages from the Universe repository: human-theme and exactly mate-themes and prefer to do either;
• Setup A (easy): Human-Clearlooks theme with Blue variant or,
• Setup B: Human-Clearlooks theme with Blue/Orange variant.

The required packages would provide the base theme: TraditionalOk is recommended. More information is found at lower half of this post, under Troubleshooting section.

Setup A (easy)

MATE, like GNOME2, has a native way to easily customize GTK+ theme. User will choose one of available themes and then customize to mix and match with other themes.

Go to Control Center > Appearance - Theme and select the base theme: TraditionalOk. Click Customize... and change the options in respective tab accordingly.

• Controls: TraditionalOk
• Window Border: Human (changed from TraditionalOk)
• Icons: Humanity (changed from MATE)
• Pointer: MATE

Click Close to finish and user will see a new entry Custom that will appear as the first entry. The changes are applied immediately, but not persistent. To make the changes persistent, select the customized theme and click Save As... and enter Name and Description as desired or accordingly.

• Name: TraditionalHuman
• Description: TraditionalOk customized with Human window border and Humanity icons (optional)

Finally click Save and user will see the customized theme is now renamed from Custom to the name of choice. This will automatically create ~/.themes/TraditionalHuman/index.theme for the customized theme.

As a result, we have recreated Human-Clearlooks theme with Blue variant. The Blue colour comes from the base theme: TraditionalOk, a GTK+3 port of Clearlooks from mate-themes package.

Compatibility: MATE/GNOME2 desktop environment only.

Limitation: Setup A does not provide option to freely change the colour. Customization is limited to the number of available themes to mix and match. Whichever themes that were used should not be removed, otherwise the customized theme will be broken.

Setup B

This setup will use selected parts of available themes to create a new theme: simply named "TraditionalHuman" with minimal dependence on these packages: gtk2-engines, humanity-icon-theme and dmz-cursor-theme. Take note as follows.

• For Human-Clearlooks with Blue variant (same as Setup A), follow only these steps: 1, 2, Final.
• For Human-Clearlooks with Orange variant, follow all steps below.

Step 1: Create a local theme directory at ~/.themes and copy the following selective files from the available themes to the local theme directory. Available themes to use: Human, Human-Clearlooks, TraditionalOk.

$ cd $HOME
$ mkdir -p .themes/TraditionalHuman
$ cd .themes/TraditionalHuman
$ cp /usr/share/themes/Human/index.theme .
$ cp /usr/share/themes/Human/cursor.theme .
$ cp -R /usr/share/themes/Human/metacity-1/ .
$ cp -R /usr/share/themes/Human-Clearlooks/gtk-2.0/ .
$ cp -R /usr/share/themes/TraditionalOk/gtk-3.0/ .

Step 2: Edit index.theme file with the following content to define the local theme.

$ nano index.theme
[Desktop Entry]
Type=X-GNOME-Metatheme
Name=TraditionalHuman
Comment=Make TraditionalOk more Human
Encoding=UTF-8

[X-GNOME-Metatheme]
GtkTheme=TraditionalHuman
IconTheme=Humanity
MetacityTheme=TraditionalHuman
CursorTheme=TraditionalHuman

Step 3: Edit the lines containing theme_selected_bg_color and core_color_a and replace the hexadecimal value to #ffbe6b. Precaution: Keep the semicolons ; at the end!

$ nano gtk-3.0/gtk.css
...
@define-color theme_selected_bg_color #ffbe6b;
...
@define-color core_color_a #ffbe6b; /* Core color for blue widgets in TraditionalOk. */
...

Step 4: Edit the line containing selected_bg_color and replace the hexadecimal value to #ffbe6b. Precaution: That is a single long line. Keep the \n instances!

$ nano gtk-3.0/settings.ini
...
gtk-color-scheme = "base_color:#ffffff\nbg_color:#edeceb\nfg_color:#000000\nselected_bg_color:#ffbe6b\nselected_fg_color:#ffffff\ntooltip_bg_color:#f5f5b5\ntooltip_fg_color:#000000\ntext_color:#1a1a1a\nlink_color:#0000ee\nvisited_link_color:#551a8b"
...

Final step: Change the theme and enjoy.

Go to Control Center > Appearance - Theme (or any supported theme manager) and select the created theme "TraditionalHuman". The changes will be applied after several seconds.

As a result, we have recreated Human-Clearlooks theme with Orange variant. The Orange colour comes from the hexadecimal value #ffbe6b that is used in the original Human-Clearlooks theme.

Variation: If user wish to have Human theme with both Blue and Orange variants, make sure to give a different name for each variant. That means, user should specify the different names for the created theme directory and every instance of the name used in index.theme file.

For example, I renamed Blue variant as "TraditionalHuman" and Orange variant as "TraditionalHumanMore" that are shown in the screenshot as follows.

User can also create more variations with different colour likewise.

Compatibility: MATE/GNOME2 and other GTK+ desktop environment.

Limitation: Setup B mostly relies on user initiatives. The theme documentation might be helpful, but rarely found. Customization is either doable or impossible: depends on whether user can understand how the theme files work or otherwise.

Troubleshooting

Additional notes to understand how theme works as follows.

The base theme: This should be the most compatible theme. A common mistake is that user tend to use the legacy theme, which is the least compatible to begin with. Do not use, and I mean do not use Human theme as the base theme (repeated on purpose).

Example of a "wrong" base theme that cannot be customized as expected:

Colour selection: Check the original theme files to be sure, and do not use colour picker against the apparent colour seen on the desktop. The apparent colour is not the actual colour: Human-Clearlooks uses Ubuntu Orange (#ffbe6b) as the main colour, but the title bar with Human theme does not show this colour itself.

Install directory: The customized theme is installed for current user only at ~/.themes in the Home directory. For system-wide users, install to /usr/share/themes instead. System-wide themes must be installed with proper permission 755, otherwise the theme may appear broken.

Yet unusable: Regardless of setup, use theme files for the same release. Do not mix theme files from different releases, otherwise the result is an unusable theme!

I have at least tested TraditionalOk from mate-themes package on all supported LTS releases at this time. Theme files for the same release will always work. Exceptional case: theme files in 14.04 and 16.04 are fairly backward and forward compatible, with little to no apparent defects.

|      \theme |       TraditionalOk      |
| system\     | 18.04  | 16.04  | 14.04  |
| ----------- | ------ | ------ | ------ |
| 18.04       | OK     | BROKEN | BROKEN |
| 16.04       | BROKEN | OK     | FAIR   |
| 14.04       | BROKEN | FAIR   | OK     |

Example of a "broken" appearance (narrow alignment in menu bar), and also an unsupported window manager with Human theme (only had some hint of Ubuntu Orange):

Other environment: Human-Clearlooks was designed for GNOME2 and Metacity window manager. Cinnamon with Muffin window manager may support the Human theme natively. Other window manager like Xfwm or Openbox might require additional configuration to show the exact appearance. That will be too broad and will not be covered in this answer.

User can hack any theme files; however, be prepared to spend at least few hours or may be several days in test environment. Hacking theme files is usually not worth the time (try again by own... without looking at this answer). Not to mention that GTK+ theme documentation is rarely found.

The most simple solution: use whatever theme that works for newer releases.

TL;DR: Use a theme that supports GTK+3 and customize from that. Unless user has a great interest in themes, not worth looking at theme files with jumbled codes. I had a quick look and thought easy to fix, but instead took several days to reach this answer.