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

Mint-Y: Low contrast #198

Closed
clefebvre opened this Issue Mar 6, 2019 · 2 comments

Comments

Projects
None yet
1 participant
@clefebvre
Copy link
Member

clefebvre commented Mar 6, 2019

Problem

A common complaint is that Mint-Y lacks contrast.

Analysis

If we look at the anatomy of a typical window, we currently have 3 shades of grey for the background colors:

image

  1. Header background (titlebar/headerbar/menubar/toolbar): #D9D9D9
  2. Base background: #EDEDED
  3. Content background: #FFFFFF

And 5 shades of grey for the text and widgets on top:

image 9

  1. Titlebar buttons: #909090
  2. Titlebar window title: #454545
  3. Text in menubar, toolbar ($header_fg in theme): #454545
  4. Foreground colour ($fg_color in theme): #202020
  5. Text color ($text_color in theme): #303030

Comparison with other themes

A vast majority of themes use similar values for text and background.

image

As illustrated above both Ubuntu and Elementary use a colour lighter than #303030 on top of #FFFFFF.

It's also a very common trend online for websites to use something lighter than #202020.

#000000 can look quite hard on the eyes in comparison.

Suggestion 1 (Accepted)

The titlebar buttons look quite pale and can certainly be darkened. They're currently at #909090, compared to #454545 for the window title.

Decision: Buttons should be darkened.

Suggestion 2 (Rejected)

We could unify the 5 shades of grey used for text/foreground.

Before (5 shades of grey):

image 9

After (with everything set to #202020):

image 10

With suggestion 1 done as well (titlebar buttons darkened to #202020):

image 11

Pros:

  • More contrast

Cons:

  • Harder on the eyes
  • Windows look flat, with less prominent content and more prominent titlebar/toolbars than before
  • The toolbar/menubar now looks like it's part of the app, whereas the original effect was to make it feel like it was part of the header/title bar, a little less noticeable than the content itself and part of what you grab and which is common to all windows.

Decision:

  • Content and titlebars should look slightly different so apps don't look too flat.
  • #202020 is quite hard on the eyes on top of #FFFFFF and doesn't work as well as #303030.
  • Menubar/Headerbar/Toolbar should remain the same as titlebar text, these components go together and this should remain less prominent than the content itself.

Suggestion 3

Experiment with different colors for the different elements, both backgrounds and foregrounds.

@clefebvre clefebvre changed the title Low contrast Mint-Y: Low contrast Mar 6, 2019

@clefebvre

This comment has been minimized.

Copy link
Member Author

clefebvre commented Mar 9, 2019

The following changes were implemented:

  • titlebar/menubar/headerbar/toolbars were darkened slightly from #454545 to #404040
  • minimize/maximize buttons were darkened when focused from #909090 to #404040
  • Mint 19.1 improvements missing in GTK2 were ported (for instance the text was still #4f4f4f, it is now #303030).
  • Table headers were #202020 for some reason, this was changed to be the same as the rest of the content (i.e. #303030) and consistent with GTK2
@clefebvre

This comment has been minimized.

Copy link
Member Author

clefebvre commented Mar 9, 2019

image

@clefebvre clefebvre closed this Mar 9, 2019

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