Add Everforest color themes

[DontBlameMe99]

Add the everforest color themes

Pull Request Type

• Bugfix
• Feature Implementation
• Documentation
• Other

Related issue

closes #4650

Description

This pull request adds the everforest color themes (found at https://github.com/sainnhe/everforest)
This means that this adds:

• Six base theme variants:
  • Everforest Dark Hard
  • Everforest Dark Medium
  • Everforest Dark Low
  • Everforest Light Hard
  • Everforest Light Medium
  • Everforest Light Low
• Fourteen main/secondary color themes
  • Everforest Dark Red
  • Everforest Dark Orange
  • Everforest Dark Yellow
  • Everforest Dark Green
  • Everforest Dark Aqua
  • Everforest Dark Blue
  • Everforest Dark Purple
  • Everforest Light Red
  • Everforest Light Orang
  • Everforest Light Yellow
  • Everforest Light Green
  • Everforest Light Aqua
  • Everforest Light Blue
  • Everforest Light Purple

I have also already compressed the SVG files on the website https://svgoptimizer.com

Screenshots

Testing

I have checked every screen I can find (if there are any things missing etc.) I have also checked every color contrast I could think of.

[efb4f5ff-1298-471a-8973-3d47447115dc]

Everforest Dark Low
Everforest Light Low

The official themes use Soft instead of Low in the name. Any reason this is changed to Low?

[DontBlameMe99]

Everforest Dark Low
Everforest Light Low

The official themes use Soft instead of Low in the name. Any reason this is changed to Low?

Apparently they are using "Soft" on the main page. I only checked the color palette page, where it says low. Any suggestion on which I should use?

[efb4f5ff-1298-471a-8973-3d47447115dc]

Everforest Dark Low
Everforest Light Low

The official themes use Soft instead of Low in the name. Any reason this is changed to Low?

Apparently they are using "Soft" on the main page. I only checked the color palette page, where it says low. Any suggestion on which I should use?

I checked the commit history of both the pallete and the readme.

the readme introduced soft, medium and hard on Mar 14, 2021
the pallete got introduced on Dec 7, 2022

Best to stick with the most recent one so no changes needed :)

[efb4f5ff-1298-471a-8973-3d47447115dc]

im not seeing Turquoise anywhere in the pallete

[DontBlameMe99]

im not seeing Turquoise anywhere in the pallete

I took a look at those colors:

and I named them. I just found out (by reading - I don't know why I didnt do this before) that this color (#83C092) is called aqua. I assumed it would be called turquoise.
Should I change the name to aqua?

Found here:

[efb4f5ff-1298-471a-8973-3d47447115dc]

im not seeing Turquoise anywhere in the pallete

I took a look at those colors: and I named them. I just found out (by reading - I don't know why I didnt do this before) that this color (#83C092) is called aqua. I assumed it would be called turquoise. Should I change the name to aqua?

Yes please change it to the official used name

[DontBlameMe99]

@efb4f5ff-1298-471a-8973-3d47447115dc I have implemented what you have asked for.

[kommunarr]

The light colors aren't supposed to fit right with the dark main themes and vice versa, so this makes sense.

You still need to set these two fields in the new block you added:
--logo-icon-bar-color
--logo-text-bar-color

[DontBlameMe99]

The light colors aren't supposed to fit right with the dark main themes and vice versa, so this makes sense.

You still need to set these two fields in the new block you added: --logo-icon-bar-color --logo-text-bar-color

Yeah totally makes sense. I think I'm just tired and not thinking correctly ._.

Which icon/text svg should I use though? Since we have multiple options?

[kommunarr]

Turn on the Match Top Bar with Main Color Theme setting, try out different things, and you can see what works

[DontBlameMe99]

Turn on the Match Top Bar with Main Color Theme setting, try out different things, and you can see what works

Done.

[kommunarr]

suggestion (non-blocking): All of the Everforest Light base themes are right at the borderline of what's considered an acceptable color contrast for text on a background per the WCAG AA standard. This functionally makes these themes persona non grata for colorblind users and users with low vision. I recommend that the luminosity values of the light text colors are lowered for these themes, ideally to the WCAG AAA standard of 7:1, to prevent this issue. I marked this as non-blocking because I know some advocates of these themes are against altering them.

[efb4f5ff-1298-471a-8973-3d47447115dc]

@kommunarr i pointed it out before but from the response on it i thought that that was the only issue

[DontBlameMe99]

suggestion (non-blocking): All of the Everforest Light base themes are right at the borderline of what's considered an acceptable color contrast for text on a background per the WCAG AA standard. This functionally makes these themes persona non grata for colorblind users and users with low vision. I recommend that the luminosity values of the light text colors are lowered for these themes, ideally to the WCAG AAA standard of 7:1, to prevent this issue. I marked this as non-blocking because I know some advocates of these themes are against altering them.

I am unsure if I should change this, since (as you said) it would definitely alter the UX of this theme. I actually already modified some a little bit to get that ~4.5 contrast.

[kommunarr]

I'll let others chime in on that, as I'm not in the target audience for themes that have a low color contrast by design (it makes me squint, even as a non-colorblind person).

One thing I did just notice retesting:

suggestion: For at least the Everforest Light Low, the watched & hover text colors are darker than the non-watched ones. This is unintuitive, as the watched videos are meant to be less visually dominant. This appears to be an issue of the primary-text-color -> secondary-text-color -> tertiary-text-color progression not being dark to lighter. These should be flipped. I haven't checked with the other themes, but make sure you're following the same light-to-dark for the primary to tertiary text color progression that we're doing with our Light & Dark themes for the new Light and Dark themes.

[DontBlameMe99]

@kommunarr Should the dark theme also be pimray darkest -> tertiary lightest?

[kommunarr]

Check our dark theme; it should be light->dark for dark themes because it's about highest contrast with background -> lowest contrast with background.

[DontBlameMe99]

@kommunarr this has been fixed.

[kommunarr]

I'm still not a fan of the color contrast for the new light themes, so I'd prefer if others chimed in as well on that before providing my approval.

[efb4f5ff-1298-471a-8973-3d47447115dc]

Also not a fan of it as pointed out before. What actions could we take to resolve this?

[kommunarr]

The fix is to decrease the luminance of the insufficiently dark primary, secondary, or tertiary text colors enough to reach 7:1 with the card-bg-color. For example, using this tool, I increased the darkness of the Everforest Light secondary and tertiary text colors by 30% to get a >7:1 color contrast for all of the Everforest Light themes. I haven't checked, but that might actually be enough to solve the issue by itself.