5

I have Ubuntu MATE 18.04 LTS installed. Previously I got this problem on MATE 17.10. I like old-fashioned Human-Clearlooks theme, so I installed human-theme package.

But it has strange silver background color in window titlebar:

incorrect silver color in Ubuntu 18.04 LTS MATE

In 16.04 LTS it has normal Ubuntu orange color - see screenshot for comparison below: correct orange color in Ubuntu 16.04 LTS MATE

I have already reported bug 1721955 to LaunchPad, it confirmed by other user.

How can I debug the issue? Do you have any ideas?

How to get GTK2-based themes working again in GTK3-based Ubuntu?

Update 20180505: Ubuntu MATE 18.04 LTS is affected too. We have a discussion on ubuntu-mate.community.

Update 20190128: Ubuntu MATE 18.10 and upcoming 19.04 are affected too.

Update 20190131: below are the screenshots from Ubuntu MATE 18.04 LTS using Human theme -

  • Gtk2 demo (named gtk-demo)

    gtk2

  • Gtk3 demo (named gtk3-widget-factory)

    gtk3

both greys are different here. But on Ubuntu 16.04 MATE LTS the Gtk2 window title is orange.

  • Is this at all useful? askubuntu.com/a/126056/225694 – Elder Geek Jan 29 '19 at 19:10
  • @ElderGeek thanks, but it will not help. Some GTK internals were changed, I do not know how to debug them. – N0rbert Jan 29 '19 at 19:13
  • Suggestion: Install gtk-3-examples and run gtk3-widget-factory and take screenshot of it (does the grey window title still appear). This will clarify that the issue is not exclusive to MATE, but GTK+ 3 in general. – clearkimura Jan 31 '19 at 13:36
  • 1
    @N0rbert Yes, I am aware that Human uses GTK+2. I wanted to clarify if the same effect is applicable to any GTK+ environment. Btw, I tried Human theme on Xfce; somewhat works but not showing the correct color shade for window title. So the issue is likely exclusive to MATE. – clearkimura Jan 31 '19 at 21:12
  • 1
    I did some trials and errors until just now and I think I "partially" solved the issue. I need to redo the steps to be sure. I will write an answer that works for MATE (but not compatible with other DE), if nobody manage to provide the full answer in time. – clearkimura Jan 31 '19 at 21:22
2
+50

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.

Setup A - Human-Clearlooks with Blue variant

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.

Setup B - Human-Clearlooks with Orange variant

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.

Setup B - Human-Clearlooks with Blue/Orange variant

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:

Human theme 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):

Human-Clearlooks with an incompatible release and environment

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.

| improve this answer | |
  • 1
    It's fantastic, actual and comprehensive answer! Thank you very much! I got TraditionalHuman working (followed Setup B). – N0rbert Feb 2 '19 at 16:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.