Ambiance GNOME theme bugbears and what can be done about them

As referred to in Didier’s post here we will be spending some time with our design team to tidy and fix up the Ambiance theme for 18.04. I’d love to hear your feedback on specific issues and get your ideas about what can be done to improve them.

For example, the gradients on maximised windows and the gradients on the top bar are a bit clashy.
The background colour on the navigation buttons in Nautilus is inconsistent.
The notebook tabs in Gedit are hard to distinguish between and are not consistent with the tabs in Terminal.

This will help us build a hit list of things which need to get fixed for Ambiance in the LTS.

Links to CSS which fix some of these is also very welcome! :wink:

Cheers, Will

3 Likes

In the GNOME Builder app, add a project. Open the project. Click the first button in the toolbar and open Preferences. The categories in the sidebar do not have appropriate padding and theming.

I don’t mind it too much but I know this decision was made just before the release of 17.10 and I think it needs reviewing:

Screenshot from 2017-11-11 23-23-44

Perhaps the green buttons should be changed to Ubuntu Orange? Was quite a big step to come up with a brand new color for Ambiance!

I am trying to avoid contributing to Ubuntu/snapcraft discussions, very behind on uni work, but couldn’t resist commenting on this…

Hello,

As it happens I’m already busy updating the Ambiance-theme. My contribution Ambiance-RW on Gnome-look.org might help you allong the way. As PAULXFCE I have made numerous themes.

Perhaps I can contribute?SCR6

6 Likes

I think the idea was to re-use some of the design language around color from Unity8 where there was ambiguity or something. Some sliders and buttons have the Green=Good and Red=Danger, maybe flushing out the colorscheme in the new theme would be good.

I would really like to see the new theme get more Suru-ish (using the range of greys and whites, Azure blue for a secondary highlight, etc), it’s a really good direction.

Issues I’ve observed:

  1. Tabs are not attached to the frame.
  2. The +/- buttons for number input boxes have a grey background
  3. The orange fill part of progressbars are larger than the grey trough
  4. Vertical spin buttons (where there’s a + then the number and then a - button) are not drawn correctly. This is probably very minor - as I’ve yet to see an app use this
  5. The selected item in a combo-box menu has dark text with an orange background. This should be white text. Should them menu not also be dark like other popup menus?
  6. The slider of an “ON/OFF” button is larger then the trough
  7. “ON/OFF” buttons look horrible in headerbars. They’re too big, and the orange glow of the “ON” part bleeds into the border. For an example look at the extensions section of the GNOME Tweaks app

Most of the above (1…5) can easily been seen by looking at gtk3-widget-factory

4 Likes

@willcooke, appreciate you and your team’s willingness to reach out to the community for feedback. I think Ambiance is still a great theme, personally. I really like how you’ve “Ubuntu-ized” the GNOME shell! Here are a few suggestions/fixes, though.

DARK VERSION OF AMBIANCE

  1. For the reasons I mentioned here (https://community.ubuntu.com/t/consider-a-dark-theme-counterpart-for-ambiance/969) , I think an “Ambiance Dark” theme (similar to Adwaita and Adwaita Dark) would be a tremendous benefit for users that find all the empty white space of Ambiance rather straining on the eyes.

HEADER BARS
2. Vertical spacers: consider removing them or making them invisible? (might look more polished. Spacers don’t seem to be necessary in header bars or serve a purpose?)
3. On/Off switches in header bars: the orange border around the button looks a bit un-polished. Possible fix would be to remove the bright orange border?
4. The “Minimize”, “Maximize” and “Close” buttons all have bolder symbols when the icon theme isn’t set to ubuntu-mono-dark. I’d suggest changing that so they look like the icons in the ubuntu-mono-dark icon set (not sure if that’s Ambiance, though).
5. Replace the orange gradient from the close button with a solid Ubuntu orange, and make the X white instead of black? Might look a little more cool and modern.

HEADER BAR & TITLE BAR DOUBLE-GRADIENT ISSUE
6. Apps like Chrome, chromium all have that clashy double-gradient look when maximized, and the “blended-gradient” we see in all other apps like Firefox and Files looks… okay. Consider removing ALL gradients from titlebars and headerbars WHEN maximzed. Keep the gradients when un-maximized. I found the Ubuntu gray color (hex code 3c3b37) looks pretty darn good when matched against the GNOME top bar with the Ubuntu gradient. It would also merge the top bar and menu bar of an app (like Gimp), making things look a lot more polished (run gimp in 17.10 and you’ll see the issue I’m talking about).
7. Consider removing the rounded corners at the top-left and top-right of the header bar? Would straight corners look better/modern?

FILES/NAUTILUS
8. The gray lines diving the different locations in sidebar and big vertical line dividing the sidebar from the main window doesn’t seem to mesh well with the rest of the theme, aesthetically. Consider making them more like how GNOME Tweaks app looks when it divides the layout (looks a little more seamless). Maybe even remove or make invisible the horizontal lines dividing sidebar entries? Might look a little more polished.

“SAVE BEFORE CLOSING” WINDOWS (Inkscape, GIMP, and any other applicable areas)
9. The orange-white gradient on the save button looks a little dated. Consider making it a solid orange (maybe Ubuntu orange) with white text – similar to how in System Settings the highlighted option on the left looks (solid orange with white text).

GNOME POP-OVER MENUS
10. Slightly reduce the amount of roundness in the corners of the pop-over menu buttons, or remove roundness altogether?
11. When the mouse hovers over an item, change the highlighted orange from a gradient to a solid orange (Ubuntu orange) color?

WORKSPACE SWITCHER IN ACTITIVITIES OVERVIEW
12. Granted, this may not actually be part of the Ambiance theme, but consider squaring off the rounded corners of the workspace switcher border. The rounded edges don’t seem to go with the rest of the theme, and the rounded corners against the straight-cornered orange highlight border looks pretty rough. (vanilla GNOME has this same problem.)

Those are my thoughts. Looking forward to more awesomeness in 18.04! You guys rock.

3 Likes

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

ambiance-Ub1ambiance-Ub2

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)

Amb-U

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.)

Step field

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.

https://github.com/CanonicalLtd/desktop-design/issues

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:
https://bugs.launchpad.net/ubuntu/+source/ubuntu-themes/+bug/1726320

But see also:
https://bugs.launchpad.net/ubuntu/+source/ubuntu-themes/+bugs
which is a relatively short list (compared to other projects :slight_smile:)