Ambiance GNOME theme bugbears and what can be done about them

Definitely like what you did there in the top-right of the image you posted with Nautilus (the sidebar style and colors are very slick, and the tab-like look of the icons in the side bar is awesome!).

1 Like

Playing with Ambiance:

  • straight corners
  • one screenshot has edged titlebuttons, the other with no edges
  • the color for the headerbar is slightly aubergine-dark grey (which-in my opinion is easier on the eyes than the standard ubuntu-colorpalet provides.
  • and one version is with the darker sidebar

This link is the actual theme, and this link is the other theme to download. (only GTK3 is changed)

This is in combination with the (very promising) SURU-icon theme. With this icon-theme the titlebuttons are thinner. Which I find to be better

8 Likes

Will this also include updating Radiance theme?

1 Like

@CraigD some of this items have been fixed recently, but not yet or just released (I guess) (like Switcher widget background goes outside its border)

Hi folks. A couple of weeks ago I took some time to review the Ambiance theme. I concentrated on the theming of GTK controls, rather than Shell/Firefox/LibreOffice (though those are important too).

1. Orange wash

Orange gets a bit tiresome over large areas. And when it is used as a transparent tint on a grey area, it almost appears pink.

Unfocused field and focused checkbox

Perhaps the focus appearance could avoid using a tinted background.

2. Header bar button height

Buttons in the header bar are taller than they are just about everywhere else.

Push button heights

I’m glad to see that this is one of the things improved in Ambiance-RW!

3. Header bar button focus

We used to have orange commit buttons — and Ambiance in Qt unfortunately still does. The problem is that it looks quite similar to red for danger (while really dangerous buttons are often left plain).

Orange commit button

Unfortunately, Gnome has copied iOS in moving commit buttons to the header bar. This layout saves space on small-screen iPhones. But on the screens that Gnome runs on, it makes these buttons very difficult to find. It goes against the whole flow of the window contents, and it’s inconsistent with Windows, macOS, and popular non-Gnome apps like LibreOffice.

We can’t restore the button position in a theme, because it’s hard-coded into individual apps. The next best thing, I thought, would be to use a bright color to make the positive buttons a bit easier to find. So I suggested using the Suru green.

However, this introduces a new problem: when the button is focused, the orange focus ring is hard to see between the green button and the dark grey background.

Push button in title bar active unfocused Push button in title bar active focused

I’m not sure what to do about this. Just making the focus ring thicker would help, but the colors would clash. Perhaps there’s a different way to make header bar buttons more visible, a style that can also be used for buttons outside header bars, and one that makes focus more visible.

4. Link mouseover

When you hover over a link, it changes to look like a button. This is distracting and unnecessary (Adwaita doesn’t do it).

Link hover GTK3 Link hover GTK4

5. Checkbox and radio button size

Checkboxes and radio buttons seem to be much smaller, compared with other controls, than they are in other toolkits.

Checkbox and radio button size

6. Checkbox focus

If you focus a checkbox, that highlights its label, and often highlights a large empty space next to the label — but it doesn’t highlight the actual checkbox! Adwaita’s dotted focus rings are very Windows-95-ish, but at least they enclose the checkbox.

Checkbox focused Ambiance Checkbox focused Adwaita

7. Radio button focus

If you focus a radio button, that highlights … nothing at all. Oops.

Radio buttons focused

8. Checkboxes vs. radio buttons

The rounded corners of checkboxes makes them look needlessly similar to radio buttons. There’s no confusion when they’re checked — but when they’re unchecked, or in their mixed value, they’re harder to distinguish. This is a case where rounded corners are a bad idea.

Checkboxes and radio buttons unchecked and mixed

9. Selection color in text fields, combo boxes, and lists

When you move focus away from a text field, combo box, or list, any selection remains bright orange. This is distracting, and makes it harder to see where the focus is. On other platforms, selections in unfocused controls are usually grey. (In this case, Adwaita has the same problem.)

Unfocused field and focused checkbox

10. Text field error state

When a text field is in the error state, it becomes solid red. This is excessive. (Unfortunately I don’t have a screenshot of this.)

11. Step field background

The grey background of a step field’s buttons bleeds into the field itself. (You may need to tilt your screen to notice this.)

12. Incomplete focus rings

When focus is on a combo box’s text field, a combo box’s button, a text field with a clear button, the clear button itself, or a button or menubutton that touches another control, the focus ring covers only two or three sides of the control, rather than all four.

Combo box with field focused
Combo box with button focused
Field with clear button focused with field focused
Field with clear button with button focused
Segmented menubutton

13. Radio menus vs. menubuttons

A radio menu (the kind that, when closed, shows the one currently-chosen item) looks identical to a menubutton (the kind that, when closed, shows a title). Things that behave differently should look different.

Radio menu Popover button

Other platforms solve this by giving a radio menu a double triangle, rather than a single triangle. (This also hints that the menu will open both upward and downward, rather than just downward.)

14. Indeterminate progress bars

If you glance at it at the wrong moment, an indeterminate progress bar looks identical to a determinate progress bar. Things that behave differently should look different.

Progress bar indeterminate

Other platforms use a barberpole pattern or pulsing color to distinguish indeterminate progress bars. This might not be fixable in a GTK theme, though.

15. Sliders

If you mouse down on a slider thumb, it doesn’t go slightly darker like a button does.

Slider with thumb pressed briefly

Separately, if you mouse down on a slider thumb and don’t move for a couple of seconds, the thumb weirdly gets smaller. Adwaita doesn’t have this problem (it does something differently weird).

Slider with thumb pressed a while

Some of these glitches might be baked into GTK, not fixable in a theme alone.

14 Likes

Ohhh it’s from Suru, that makes more sense, given we’re moving to Suru icons too. Thanks for the info! :smiley: and thanks for your hard work on this :slight_smile:

Would it be possible to upstream fixes if we (well, you (plural)) could make some, then? :slight_smile:

If we can fix them, then we will certainly upstream them, subject to the patches being accepted upstream of course.

3 Likes

Thanks for your analysis - seems like a good list of bugs to fix to me.

Is it just me that finds this colour way too bright? I know it’s the “suggested action” in GTK+ terminology, but it is so prominent to me that it actually makes it a little bit hard to focus on the content of the dialog. (The red has a similar effect, but I don’t find it so bad.)

The green used is certainly distracting. I agree with that.

1 Like

I think the differences between Suru on Unity8 and this update to Ambiance is the really exaggerated vertical padding on the buttons, and the gradients on both the button fill and text (maybe it’s more of an up-cast shadow). Excessive contrast is definitely real. I love the green and am in favour of usefully expanding the color palette with the Suru colors, like Azure for the secondary highlight color to contrast with the orange for everything.

Hi all,

As @didrocks mentioned in the other thread, we spent some time with our design team last week to get a list of bugs together for what we want to get fixed in Ambiance while the community theme work is going on.

We’ve got a pretty comprehensive list of bugs together here. These should cover everything mentioned above, but let me know if something is missing and I can add it if necessary.

Some of those bugs are fairly self explanatory, but they could probably all use a screenshot or two to better show what’s being addressed, and I will try and get those updated during the next week, or if you can help, please do.

Help required

If you’re able to help fix some of these bugs feel free to comment here that you’re working on it. If you need some pointers “@” me on the github issue and I will try and answer your questions. Issues which are tagged with a “Design Team” tag probably need design team input - and they will comment on the issues with that input in due course. If you are especially keen to work on an issue that needs design input let me know and I can try and prioritise it - or make your suggestions on the guthub issue and the design team can +1/-1 etc.

Cheers, Will

4 Likes

Probably just inverting normal green color with the darker one of the focus state could be an improvement

1 Like

If you have suggestions on the button colour ideally please put them here:

But see also:


which is a relatively short list (compared to other projects :slight_smile:)

Small check and radio buttons are a regression from GTK 3.20 and onwards. In Ubuntu 16.04 and GTK 3.18 they had a normal size.

Note that notebook tabs have also regressed since then, you can see in the screenshot.

Can the green " OK " button theme be replaced with something Blue. Even Cyan and Torquise blue are better and less aggressive on eyes than green.

Important issue with Ambiance:

Gnome software doesn’t show search results until a focus/geometry change

I can’t reproduce this with the new Communitheme.

1 Like

@3v1n0 something to track ^ Thanks @merlijn-sebrechts :wink:

Indeed, thanks.

Not sure it should be still an app issue, though. As the theme isn’t per se wrong if it works after a resize.


Bug in the application menu in the header bar in session-ubuntu.

1 Like




I’m using Ambiance on a 13 inch laptop, is there someone like me noticed that the three buttons(* minimize button , maximize button *,and * close button *) not fit with others. Other buttons are like square but these three are round. The worse thing is they are too small and hard to click. While the button size in communitheme and adwata theme I think is OK. You can see from the picture I upload. Last pic is ambiance.