Rethinking the theme libray

[aadcg]

I was playing around with themes today and I noticed that our default theme doesn't follow all of the recommendations related to contrast mentioned in libraries/theme/theme.lisp.

I put some thought to it and played a bit with a nice tool that computes the contrasts.

Today we're here:

A suggestion:

EDIT: Of course it'd look awful if we were to apply these colors right now, as it can be seen below. The point was to tweak the colors to meet the criteria of having overall better contrasts.

Reference: Colors with a minimum of 4.5:1 contrast ratio on both black and white.

[Ambrevar]

True your suggestion has better contrast, but I find the original theme more pleasing to the eye. Just a personal preference.

[aartaka]

Current color themes are both parts of Nyxt identity. While we certainly can change some tertiary or quaternary colors, the accend and primary colors are too important to shift them much. We've discussed it with @jmercouris when doing a theme library — Carribean Blue is a good an recogniseable accent color.

However, having proper color contrast is important, I acknowledge that. How about this: you design accessible theme(s) (you have good ideas on those, based on our nx-modus-themes chat) and we merge those in Nyxt, and list those together with the two default themes.

This way, we preserve Nyxt identity color scheme in a default theme, while still having an easy toggle for a more accessible variant.

[aadcg]

I agree, and I don't think we should change our color palette. Rather, I'm studying its properties.

primary-color: Should preferably contrast both with background-color and text-color. secondary-color: Should contrast with background-color. tertiary-color: Should contrast with text-color. quaternary-color: Should strongly contrast with text-color. accent-color: Should contrast with every other color in the theme.

The WCAG guidelines help us to quantify contrast. They define the following ratios as desirable:

• 7:1 (better); easy to find colors that contrast with either background-color or text-color.
• 4.5:1 (good); still possible to find colors that contrast with both background-color and text-color.

Is it necessary to have one color, primary-color, that contrasts with both background-color and text-color? Let's see where it's being used (marginal use cases omitted):

1. html elements (h1..6, anchors, table headers)
2. the controls part of the status buffer (back, forward, reload, "hamburger")
3. hint's background (with opacity)

Case 3 is the only one that might require good contrast between 3 colors.

Conclusions:

• [ ] accent-color can't have a 4.5:1 contrast ratio with every theme color. Edit its definition.
• [ ] primary-color should have good contrast with text-color or, optionally, with both text-color and background-color.
• [ ] I really think that the box-style of the hints should have full opacity, otherwise we have an awful contrast and it's not the best default.

[aadcg]

I took some time to think about this. My idea was to port the modus themes, whose palette is in the public domain, and write an external extension. In the process, I reviewed the foundations of how we think about themes so that it's general enough for any use case.

Please see the final 3 conclusion above and tell me your opinions. @jmercouris @aartaka @Ambrevar @pdelfino

[Ambrevar]

For the box style, we have a binding to toggle the box opacity, so as long as we can toggle between high contrast and low opacity, we are good.

[aartaka]

The WCAG guidelines help us to quantify contrast. They define the following ratios as desirable:

• 7:1 (better); easy to find colors that contrast with either background-color or text-color.
• 4.5:1 (good); still possible to find colors that contrast with both background-color and text-color.

Is it necessary to have one color, primary-color, that contrasts with both background-color and text-color? Let's see where it's being used (marginal use cases omitted):

1. html elements (h1..6, anchors, table headers)
2. the controls part of the status buffer (back, forward, reload, "hamburger")
3. hint's background (with opacity)

Case 3 is the only one that might require good contrast between 3 colors.

primary-color is the main color of interface elements. Given this purpose, it's preferable for it to have contrast with both text-color and background-color, because intrface elements tend to mix with both. Even if we don't have much cases where it happens, we should aim to preserve maximum possible contrast there.

• [ ] accent-color can't have a 4.5:1 contrast ratio with every theme color. Edit its definition.

Yes! It is indeed confusing :D We should rather say that is should stand out, without specifying in which way!

• [ ] primary-color should have good contrast with text-color or, optionally, with both text-color and background-color.

I'd say the other way around! Currently, we have a lot of interface elements (buttons, table headers, prompt selection) that have

:background-color theme:primary 
:color theme:background

to look integrated with both the backgroudn and the text. Because of that, contrast of primary-color with background-color is more important than with the text-color—it simply is a more widespread and sensible interface element palette!

• [ ] I really think that the box-style of the hints should have full opacity, otherwise we have an awful contrast and it's not the best default.

I concur with what @Ambrevar said—it's just a matter of finding a good set of colors for hints!

[aadcg]

I'm going to reply but it's important to understand that I've now read the material design guidelines that @aartaka got inspiration from.

Regarding the box-style of the hints, are you saying that we should keep the opacity and choose another color?

primary-color is the main color of interface elements. Given this purpose, it's preferable for it to have contrast with both text-color and background-color, because intrface elements tend to mix with both. Even if we don't have much cases where it happens, we should aim to preserve maximum possible contrast there.

Not quite. primary-color is certainly not a neutral color, i.e. it must stand out, and it should communicate our branding (in our case it's the Caribbean blue). Regarding contrast, a foreground color must be choose when primary-color is in the background (the so-called on-primary concept in the material themes). In our case, that would be black. We're violating that principle today.

Yes! It is indeed confusing :D We should rather say that is should stand out, without specifying in which way!

We agree. Both primary and secondary colors should stand out.

I'd say the other way around! Currently, we have a lot of interface elements (buttons, table headers, prompt selection) that have

:background-color theme:primary :color theme:background

to look integrated with both the backgroudn and the text. Because of that, contrast of primary-color with background-color is more important than with the text-color—it simply is a more widespread and sensible interface element palette!

Again, I'm afraid we're doing it wrong. primary and secondary colors are meant to be used on big surfaces so we don't need to care much about the contrast between background and primary/secondary. If you put a light grey square inside a white square, you can discern it well. We need to take into account contrast ratios such as on-primary:primary or on-secondary:secondary, i.e. text or small elements that will be on the foreground.

[aadcg]

I don't think this is the right moment to make big decisions. My goal, in the long run, is to provide a better default theme without changing the grey/blue palette. It might not make much sense to work on #2188, while we don't have a good foundation on the theme library.

I think I have a clear idea of how it could be done, but it requires time and experimentation. There are more pressing things to work on now.

What we should address right now, if we reach consensus, is to be more precise on the concepts and properties of our theme library.

The proposal below might sound radical, but please think it through.

background and on-background must have a high contrast ratio.

primary is the one that stands out and conveys the "branding" . on-primary must have a high contrast ratio with its counterpart.

surface follows the same rationale as primary, and one can define as many as needed.

primary and all surfaces are used on surfaces, so there are no contrast requirements relative to background and on-background.

How does it map?

| now                | proposal        |
|--------------------+-----------------|
| `background-color` | `background`    |
| `text-color`       | `on-background` |
| `accent-color`     | `primary`       |
| none               | `on-primary`    |
| `primary-color`    | `surface1`      |
| none               | `on-surface1`   |
| `secondary-color`  | `surface2`      |
| none               | `on-surface2`   |
| `tertiary-color`   | `surface3`      |
| none               | `on-surface3`   |
| `quaternary-color` | `surface4`      |
| none               | `on-surface4`   |

[aartaka]

I've re-read the Material Design Guidelines (MDG), and I have to highlight one thing about them: they are about designing applications (single-purpose, one company, an identity that stands out), not platforms (OSes/DEs/shells/computing environemtns, general-purpose, provide a neutral basis for applications to stand out from).

Nyxt is a platform for both

• web sites (branded, colorful, mostly single-purpose, essentially applications)
• and our own set of applications, like Demeter.

Thus, Material Design guidelines are not to be taken literally there—platforms have a different set of design requirements than applications do. Notably, platforms need to be more neutral about the brand colors:

• GNOME only using their blue for active selection and some other highligts, otherwise going with the charcoal-ish dark theme and terribly white light theme,
• or MS Windows allowing one to configure the whole interface with the base color (dark/light) and accent color (current selection, attention-seeking elements, some other colorized interface elements),
  • LineageOS, a fork of Android, does quite the same, allowing one to choose between dark and light theme, and giving some 10+ options for accent colors.
• or, as an example from the browser world, Mozilla Firefox—even though there is a whole palette of brand colors (fiery orange, purple, light blue, canary yellow), they are only used to highlight some particular thing and direct one attention to something.

Given this set of requirements, I believe that my adjustments to Material Design are sensible enough:

• text color, while it should be called on-primary by MDG, makes more sense as a text color -- it just transmits more mening this way.
• background color is sensible too.
• primary color should be a neutral gray-ish one to not require too much attention from the user, as we're being a neutral platform for all types of content and branding here.
• secondary color should be quite neutral too, as the second most used interface color.
• tertiary and quaternary colors, although terribly named, do still make sense, as our interface is both
  • more focused than what MDG anticipate in their generality, and
  • more diverse in the types of pages that we create.
  • We just need more colors in our palette there!
  • However, the term variant from MDG could work here. We can use primary-variant and secondary-variant as quite a semantic naming, if those are shifted from their respective originals in the theme-specific direction.
• Finally accent, as I've already said, has no place in the application-oriented MDG, but has a placy in platform-specific design. For general platforms, such as Nyxt, we don't have to use lots of brand colors—the mere platform usage frequency makes the accent color recognizeable enough. If you use a browser for four hours every day, it's enough to just color a couple of elements in Carribean Blue for you to get the identity.

Again, I've taken inspiration from MDG, yes. But MDG are still to be taken with a grain of salt, given the specificity of our use-cases. And deviating from the ~Bible~ MDG is okay here, if our case requires it. And it does.

[aadcg]

White smoke emerged from the Sistene chapel during the conversation I had with @aartaka.

We agreed on the following:

• [x] surface colors, such as accent or primary, must have a pair by the name of on- ensuring good contrast ratios;
• [x] access if we really need tertiary and quaternary colors;
• [x] accent is a color that stands out, while primary and secondary are neutral;
• [x] ready to ship on 3.0.

[jmercouris]

I must say your metaphor is hilarious André! Let's wait then. I think tweaking the theme will be a "lifelong" process anyways.

[aadcg]

Significant progress in this front was achieved. Thanks everyone, especially @aartaka.