Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The headerbar buttons lack of contrast compared to the background #1477

Closed
seb128 opened this issue Aug 29, 2019 · 62 comments · Fixed by #1493

Comments

@seb128
Copy link

commented Aug 29, 2019

(Sorry if it's something discussed before but I couldn't find a reference to it.)

The action buttons in headerbars are not really easy to see (it's partially fault of the upstream design but Yaru has even less contrast between the bg and buttons than adwaita). The issue was discussed on the desktop IRC channel in the context of current eoan and gnome-control-center/display and some team members couldn't find the display/night mode selector at the top of the page, it's not specific to that panel though (the 'select image' in the background panel for example has the same issue)

Is there anything that we could do to make those more easy to spot for users?

@Feichtmeier

This comment has been minimized.

Copy link
Contributor

commented Aug 29, 2019

Yes, we could lighten up the headerbar color for example.
The buttons are connected to that headerbar color

@clobrano

This comment has been minimized.

Copy link
Member

commented Aug 29, 2019

Hi @seb128, is the night mode selector coming from a new version of control-center? I could not see it, either because of this same issue or because I have a previous version of g-c-c :)

@seb128

This comment has been minimized.

Copy link
Author

commented Aug 29, 2019

@clobrano it was moved to the headerbar in the current GNOME unstable serie so it's only in eoan, the button have a visible border/text but the bg color is pretty similar to the bg so they are not invisible just lacking contrast. I'm currently on another laptop but I will send a screenshot a bit later

@Feichtmeier

This comment has been minimized.

Copy link
Contributor

commented Aug 29, 2019

image

image

This is 3% lighter
🤷‍♂
Looks less sexy (orange and dark looks really great, orange with that grayish not so much), but more easy for the eyes, IMHO

@clobrano

This comment has been minimized.

Copy link
Member

commented Aug 29, 2019

What's the exact color? I was testing something similar, making a palette from our base HB color #2b2929 and using a ligher one #3E3C3C (for both headebar and top panel)

image

Even the top panel + dock seems less eavy with this color, what do you think?

@Feichtmeier

This comment has been minimized.

Copy link
Contributor

commented Aug 29, 2019

The new one is

#333030 (lighten(#3d3a3a, 3%) )

The old one is

#3d3a3a

I think it looks good, but I would keep the top panel darker, so we dont have that "wall of gray" again ;D (I think that was one of @ubuntujaggers first participation)
Maybe @madsrh could help us here, too? :D
I am not really good with colours! But I agree with @seb128 about the readability issue

@Feichtmeier Feichtmeier added the design label Aug 29, 2019

@clobrano

This comment has been minimized.

Copy link
Member

commented Aug 29, 2019

#333030 (lighten(#3d3a3a, 3%) )

uhm, why #3D3A3A? Headerbar is #2B2929. Anyway, it would be cool to have the same g-c-c to test it locally, otherwice I can open a new PR for testing

clobrano added a commit that referenced this issue Aug 29, 2019
ubuntu-colors: Lighten headerbar up
Current headerbar color is too dark to allow a good contrast with action
buttons. To fix it, I generated a palette from the original color
(#2B2929) and taken a lighter tone #3E3C3C

closes #1477
@Feichtmeier

This comment has been minimized.

Copy link
Contributor

commented Aug 29, 2019

It's definitely 2b2929, no idea what I had in the copy when I pasted

@seb128

This comment has been minimized.

Copy link
Author

commented Aug 29, 2019

Just for reference that's a g-c-c headerbar today without change

headerbar

@seb128

This comment has been minimized.

Copy link
Author

commented Aug 29, 2019

(oh and it does look better/more visible on the screenshot with an external screen, so probably the low quality screen of my test laptop doesn't help there...)

@clobrano

This comment has been minimized.

Copy link
Member

commented Aug 29, 2019

Thanks @seb128, that's the stackswitcher button, I can test it elsewhere without installing the new g-c-c 👍

@clobrano

This comment has been minimized.

Copy link
Member

commented Aug 29, 2019

here gtk3-widget-factory with a similar stackswitcher button and proposed new hb color

image

@Feichtmeier

This comment has been minimized.

Copy link
Contributor

commented Aug 29, 2019

The pressed buttons have also more detail like this. You can distinguish what's the shadow and what's the border which results in a sharper button.

How does it look ontop of the dark theme?

@seb128

This comment has been minimized.

Copy link
Author

commented Aug 29, 2019

It looks fine but what if option 1 is selected? it still feels like the selected and bg color are quite close

@clobrano

This comment has been minimized.

Copy link
Member

commented Aug 29, 2019

It looks fine but what if option 1 is selected? it still feels like the selected and bg color are quite close

image

I can try to mockup a version with a different pressed button color

@seb128

This comment has been minimized.

Copy link
Author

commented Aug 29, 2019

Thanks, I'm probably not the best to comment about the tweaks since I usually don't have a good eye for such details, it doesn't look obvious to me that there are buttons in the bar still but I think it's mostly GNOME's design fault for putting buttons in an usually location... I'm off next week but maybe @8none1 and @didrocks have an opinion on the topic

@8none1

This comment has been minimized.

Copy link
Contributor

commented Aug 29, 2019

To be brutally honest, they all kinda look the same to my eyes.

The discovery of those buttons in the header bar isn't great, does it warrant a more significant change to make it more obvious?

@clobrano

This comment has been minimized.

Copy link
Member

commented Aug 29, 2019

I am probably a bit biased, since I see them all day and I lost the "first sight" effect.
Previously the stackswitcher buttons had light borders we cannot reproduce in this version, because of the 3D effect, which is evidently too subtle with a "crazy dark" (cit.) headerbar color :)

Just to focus on the problem:

  • is it hard to spot the normal buttons from the headerbar background?
  • is it hard to spot the active buttons from the headerbar background?
  • is it hard to spot the normal buttons from the active one?
  • all the above?
@clobrano

This comment has been minimized.

Copy link
Member

commented Aug 30, 2019

In the meantime, here are some mockups where I try to work on button borders, making them more visible.
It might look a bit exaggerated, but I'm trying to consider all the different light conditions and probably it'd be faster if I shot higher and then refine :)

Software center
image

Boxes
image

Nautilus
image

@clobrano

This comment has been minimized.

Copy link
Member

commented Aug 30, 2019

Here the new g-c-c on Eoan

image

@clobrano

This comment has been minimized.

Copy link
Member

commented Aug 30, 2019

To avoid messing up with the discussion, I'm collecting the mockups

here https://paper.dropbox.com/doc/Headerbar-button-review--Aj3giatD9eqflHWxVIclGzkCAg-LNYRgSOLjZpVsWfWbTOXP

@Feichtmeier

This comment has been minimized.

Copy link
Contributor

commented Aug 31, 2019

@8none1 @seb128
Another option would be to drop the dark headerbar in the light theme, and rely on the upstream look for the headerbar, which drops a lot of distinctive previous yaru/ubuntu design/look, but adds great usability imo, edit2: the current master is already easier to maintain than the previous theme, but with no change to the headerbar styling it becomes even easier but mostly safer and every break/issue/glitch that might occur comes directly from upstream

Edit: this is still

  • our full color set
  • our border-radius
  • our button sizing
  • less gradients on buttons/flatter look
  • different titlebuttons
  • flatter checks/radios

Screenshot from 2019-08-31 10-18-44

Screenshot from 2019-08-31 10-19-50

Screenshot from 2019-08-31 11-51-21

Screenshot from 2019-08-31 10-24-03

Screenshot from 2019-08-31 11-51-50

And eventually add more ubuntu colors to the titlebuttons hover:
Peek 2019-08-31 12-10
Peek 2019-08-31 12-13

Test branch: https://github.com/ubuntu/yaru/tree/light_theme_light_headerbar

@8none1

This comment has been minimized.

Copy link
Contributor

commented Sep 2, 2019

To avoid messing up with the discussion, I'm collecting the mockups

here https://paper.dropbox.com/doc/Headerbar-button-review--Aj3giatD9eqflHWxVIclGzkCAg-LNYRgSOLjZpVsWfWbTOXP

I like version 7!
That addresses my main concerns I think.

@8none1

This comment has been minimized.

Copy link
Contributor

commented Sep 2, 2019

@Feichtmeier I think a dark theme with a light header bar detracts from the main point of the dark theme. Just my 2 cents, but I don't think it works. I like version 7 above best. (Just my opinion)

@clobrano

This comment has been minimized.

Copy link
Member

commented Sep 2, 2019

Short update after discussing with team and on IRC, I will try to improve the disabled button in order to made them look less "actionable". This is a possible solution

image

  • no borders (or lighter ones)
  • less visible label
@Feichtmeier

This comment has been minimized.

Copy link
Contributor

commented Sep 6, 2019

Uhm, the current theme IS already very close to adwaita (which only works because we "upstreamed" many design ideas from yaru INTO adwaita). But we are inverting the headerbar color. Reasoning why this is not-so-good readable at day and gtk being not ready for this is summed up here

We made some changes to the light theme, currently it looks like this (many pictures incoming):

Screenshot from 2019-09-05 07-19-10
Screenshot from 2019-09-06 05-12-38
Screenshot from 2019-09-06 05-14-56
Screenshot from 2019-09-06 05-16-07
Screenshot from 2019-09-06 05-16-42
Screenshot from 2019-09-06 05-18-35
Screenshot from 2019-09-06 05-20-52
Screenshot from 2019-09-06 05-21-54
Screenshot from 2019-09-06 05-22-02
Screenshot from 2019-09-06 05-28-54
Screenshot from 2019-09-06 05-44-32
Screenshot from 2019-09-06 05-45-01

While the dark yaru theme looks like this:
Screenshot from 2019-09-06 05-42-35
Screenshot from 2019-09-06 05-42-51
Screenshot from 2019-09-06 05-43-05
Screenshot from 2019-09-06 05-43-33
Screenshot from 2019-09-06 05-43-49

@real-amano

This comment was marked as off-topic.

Copy link

commented Sep 6, 2019

If preserving the most memorable Ubuntu moments is not worth it, why fork Adwaita at all? And not ship plain Adwaita?

@clobrano

This comment has been minimized.

Copy link
Member

commented Sep 6, 2019

Reasoning why this is bad design is summed up here

I wouldn't say it's "bad design", though.

@real-amano

This comment has been minimized.

Copy link

commented Sep 6, 2019

To be a little bit more constructive:

If this is really going to take the bright headerbar road, can you consider putting at least a "shot" of coffee into it? To retain some of the old Ubuntu feeling? I believe that there are a lot of shades out there that are bright enough and still resemble the classic, warm "African" look and feel?

@DarthWound

This comment has been minimized.

Copy link

commented Sep 7, 2019

Yeah, as I said a bit of "sepia" colors instead of pure grey would give a better Ubuntu feeling. Maybe playing with the warm grey tints? But I disagree that having a full light theme is the same than default Adwaita, we still have orange accent color and other stuff. I love when distros ship their own branding, especially Ubuntu, but I agree that we shouldn't go too far from upstream. And as we said, dark headerbar has some usability concerns.

And, honestly, I'm pretty sure that if Ubuntu team use a full light theme, you'll be able to download "old" Yaru forks made by people who don't like changes, as always.

Personally I can't wait for the full light theme, I use full dark at night but at day the "hybrid" is painful. If it comes in 19.10 it would be a great birthday gift haha!

We often say that Ubuntu tries to reinvent the wheel and breaks stuff, we should be happy that nowadays Ubuntu adapts itself to upstream and tries to be GNOME compliant, without losing its identity that much. Remember the Nautilus patches with obsolete versions and other things... Anyway people will never be ok with any decision, when Unity was released because GNOME3 wasn't what Ubuntu had in mind, community was angry, when Unity was dropped community was angry even if Ubuntu became a big contributor to GNOME and improved a lot of stuff.

@Trine4

This comment has been minimized.

Copy link

commented Sep 7, 2019

@Feichtmeier Wow! As much as I was not a fan of the first version but there with these subtle hues of gray, it's just beautiful!
The green buttons fit better than with the black theme and the orange colors of the sidebar become more pleasant (before it was a bit aggressive).
There is really a sense of detail when you pay attention. In short, I'm ready to leave the dark side to have this beautiful theme :)
Great job! 🎉

These screenshots are my favorites:

64419064-1e998880-d06a-11e9-8e4c-193410bb5728
64419067-1e998880-d06a-11e9-9722-46b473967508

@8none1

This comment has been minimized.

Copy link
Contributor

commented Sep 9, 2019

I really like the changes in #1493.

Yaru 19.10 automation moved this from To do to Done Sep 9, 2019

@Feichtmeier Feichtmeier unpinned this issue Sep 9, 2019

@seb128

This comment has been minimized.

Copy link
Author

commented Sep 9, 2019

Sorry for the delay commenting back since I was on holidays/offline, great work going through the options, +1 from me for the solution picked, thanks yaru team, I think that's going to be a noticable usability improvement :-)

@DarthWound

This comment has been minimized.

Copy link

commented Sep 9, 2019

Awesome!! Congrats and thanks, can't wait for 19.10 :)

Genuinely asking though, what about using warmer colors than pure cold grey?

@Kazhnuz

This comment has been minimized.

Copy link

commented Sep 9, 2019

Darn, I haven't been fast enough to talk about that before merge, but I wonder if a solution couldn't have been to have a slightly light-orange headerbar color, as a bit of a reminiscence of the "Humanity" theme ? Humanity was a theme really similar to Clearlook, but with Orange tint instead of blue, and especially on the title bar. So it could be interesting to try something kinda similar.

It would cover not inverting the color of upstream (it would just be a custom tint of the headerbar and not being "dark"), while still keeping an Ubuntu-like identity ? I can make some test of what it could look like if you want.

( Not that I don't like the result : it's give a pretty cool effect, I just think that it could have a bit more of an immediate recognizability, without messing too much with application theming. )

@real-amano

This comment has been minimized.

Copy link

commented Sep 9, 2019

Or a slight hue of coffee color/brown? To retain more of its "warm" identity?

@clobrano

This comment has been minimized.

Copy link
Member

commented Sep 9, 2019

@DarthWound

This comment has been minimized.

Copy link

commented Sep 9, 2019

The old brown titlebar wasn't really appreciated if I remember correctly :D

If you talk about the Humanity era (brown, not orange) before 10.04 and Ambiance, you can't imagine how much I loved it 😆 But yeah I don't think I would be fond of it nowadays. I just hope for a warmer tint than cold grey, but I wouldn't like colored headerbars.

@Kazhnuz

This comment has been minimized.

Copy link

commented Sep 9, 2019

If you talk about the Humanity era (brown, not orange) before 10.04 and Ambiance, you can't imagine how much I loved it laughing But yeah I don't think I would be fond of it nowadays. I just hope for a warmer tint than cold grey, but I wouldn't like colored headerbars.

Maybe for that one inspiration could be Sam Hewitt's old "Humanitary" theme ? ( https://github.com/snwh/humanitary-gtk-theme / https://www.snwh.org/humanitary ). It had a warm feeling that really bring for me that old "ubuntu" feeling, and it would be a good inspiration to brand the headerbar without going too much back to the "dark headerbar" territory.

Maybe it would feel too much oldschool though ? Personally I really love it, but I can't talk for anyone else.

(I won't really bother too much, especially because we are getting off topic from this issues. Maybe another one should be opened for that topic.)

@DarthWound

This comment has been minimized.

Copy link

commented Sep 9, 2019

If you talk about the Humanity era (brown, not orange) before 10.04 and Ambiance, you can't imagine how much I loved it laughing But yeah I don't think I would be fond of it nowadays. I just hope for a warmer tint than cold grey, but I wouldn't like colored headerbars.

Maybe for that one inspiration could be Sam Hewitt's old "Humanitary" theme ? ( https://github.com/snwh/humanitary-gtk-theme / https://www.snwh.org/humanitary ). It had a warm feeling that really bring for me that old "ubuntu" feeling, and it would be a good inspiration to brand the headerbar without going too much back to the "dark headerbar" territory.

Yeah, but it's too much imho. As I said, something like the current Adwaita headerbar is enough for me, or we could look at the warm grey palette. Honestly, Adwaita with just orange accents instead of blue would be ok. But I love Yaru for sure.

@Trine4

This comment has been minimized.

Copy link

commented Sep 9, 2019

At first I was reluctant with the new light theme. But the spirit of Ubuntu is still here ... modernized :) The orange color of the side menus fits perfectly with the new theme and the beautiful icons stand out better.
I'm afraid that by tinkering the headerbar, the result is too busy and does not fit well with the desktop of everyone (including wallpapers).

@madsrh

This comment has been minimized.

Copy link
Member

commented Sep 9, 2019

Or a slight hue of coffee color/brown? To retain more of its "warm" identity?

...Honestly, Adwaita with just orange accents instead of blue would be ok.

We've tried with different shades of brown-ish warmer light headerbars, but always ended up with something close to Adwaita - we don't want that. I think the theme still keeps its identity although the shade we've chosen doesn't exactly scream "coffee". It is IMHO very modern, lightweight, clean and unique.
We appreciate all the feedback and we know it's a controversial decision that will have fans and haters, but for now we're giving this approach a try 😃

@DarthWound

This comment has been minimized.

Copy link

commented Sep 9, 2019

No problem, it's almost perfect, good job :) I can't wait for 19.10!
18.04 was excellent, but 20.04 will be the best LTS since a long time.


EDIT: and maybe we will get rid of the kinda useless topbar soon 😜
I already reduce its size with custom CSS rules:

stage { font-size: 10.75pt; }
#panel { height: 1.4em; }
@mateuswetah

This comment has been minimized.

Copy link

commented Sep 10, 2019

@madsrh and @Feichtmeier an opinion from an intruder here:

  1. I think it's a good move, but also would expect something warmer as proposed by @DarthWound or even a full white approach...
  2. But now, without the dark header, I feel that sidebar selected items are "screaming" too much with that orange... I know it's something Adwatia does too, but it feels more relevant than the whole window. Possible solutions would be trying a really bright orange with dark text or a light gray there... not sure.

Anyways, good work there guys!

@memeplex

This comment has been minimized.

Copy link

commented Sep 11, 2019

It could only be fair if you also showed in your previewing screenshots a non-headerbar app usually used in dark mode, fully maximized, with you new light theme. For a popular choice: vscode. Then people would also know how awful the new approach could look, with its dark-light-dark sandwich, despite all the advantages. You might say that's legacy stuff but still that's the way Electron is now. Not to mention many other "legacy" apps.

@DarthWound

This comment has been minimized.

Copy link

commented Sep 11, 2019

It could only be fair if you also showed in your previewing screenshots a non-headerbar app usually used in dark mode, fully maximized, with you new light theme. For a popular choice: vscode. Then people would also know how awful the new approach could look, with its dark-light-dark sandwich, despite all the advantages. You might say that's legacy stuff but still that's the way Electron is now. Not to mention many other "legacy" apps.

I don't have any electron app installed, so I can't test, does this work?
GTK_THEME=Yaru:dark vscode

If yes, then you can create a custom .desktop file in ~/.local/share/applications/ containing the following line: exec=env GTK_THEME=Yaru:dark vscode

PS: you sound a bit rude, and it's not an issue that you'll meet only in Ubuntu, all distros shipping Adwaita or other light themes are impacted I guess.

@memeplex

This comment has been minimized.

Copy link

commented Sep 11, 2019

It's not my intention to sound rude and I know Adwaita works like that and is shipped out-of-the-box at least by Fedora, that's why I prefer(red) Yaru over Adwaita and I have supported the choice of a mixed-theme over a fully-light one in Discourse and other places.

I also know how to set a different theme by setting the GTK_THEME environment variable.

One thing I'm not being able to do is dynamically changing the variant by setting _GTK_THEME_VARIANT using xprop. Isn't that supported by mutter?

@DarthWound

This comment has been minimized.

Copy link

commented Sep 11, 2019

AFAIK xprop should work, except if you use Wayland session.

If it helps, remember that an optional mixed theme should be available in 20.04 LTS. And as I said in a previous comment, I'm pretty sure that you'll be able to find the old mixed Yaru in GitHub/GitLab/GNOMELook soon because a lot of people don't like changes and will provide the former stuff, as always. You could even try to backup the current one from your PC.

@memeplex

This comment has been minimized.

Copy link

commented Sep 11, 2019

I use X11. It's not xprop what is not working but setting that specific property. I'm asking about this in mutter gitlab.

@clobrano

This comment has been minimized.

Copy link
Member

commented Sep 11, 2019

This seems a bug not related to any theme and only incidentally the mixed theme worked as workaround. I understand the concern, and we are working on a way to provide all the choices our people might like, but this doesn't seem the right place to discuss it

@ubuntu ubuntu locked as resolved and limited conversation to collaborators Sep 11, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
You can’t perform that action at this time.