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.

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

[github-actions]

This PR is stale because it has been open 14 days with no activity. Remove stale label or comment or this will be closed in 14 days.

[DontBlameMe99]

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.

So this is what I should do?

[kommunarr]

Yep, go ahead!

[DontBlameMe99]

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.

I just again took a look at it. Basically this would result in all the colors becoming the same? I don't know about you but for me this would make the theme look really flat and boring - maybe I am using the tools you have provided wrong?
For the tertriary of the light low theme I would get #3c454a, same for the secondary etc.?

[kommunarr]

You can try things out and see how it looks - better accessibility is strictly better than worse accessibility

[DontBlameMe99]

You can try things out and see how it looks - better accessibility is strictly better than worse accessibility

Implemented? I am not sure if this is all that's needed, but it looks okay.

[kommunarr]

Thanks! Apologies for this last minute one, but this issue was noticed with the Catppuchin Mocha theme in #6597, and I now see it here:

issue (blocking): The author comment identifier is not clearly visible. This is because the secondary-card-bg-color needs to be at a 3:1 color contrast with the card-bg-color for the new themes, which is currently not being met. Please refer to the previously discussed tools on how to assess and address this:

[DontBlameMe99]

Thanks! Apologies for this last minute one, but this issue was noticed with the Catppuchin Mocha theme in #6597, and I now see it here:

issue (blocking): The author comment identifier is not clearly visible. This is because the secondary-card-bg-color needs to be at a 3:1 color contrast with the card-bg-color for the new themes, which is currently not being met. Please refer to the previously discussed tools on how to assess and address this:

I see what you are talking about, but I am unable to come up with a solution. If i prioritize the contrast between the secondary-card-bg-color and the card-bg-color, I end up with something like this (which now doesn't meet the criteria with the text):

Yes, I could make this work by changing the text to something white-ish as well - but then I am just creating another dark theme?
Maybe I am missing the main point, or not understanding what I should do, but I am unable to come up with a solution.

[kommunarr]

Thanks for looking into this - given that this appears intractable to solve without some additional modifications (e.g., adding a border around it for specific themes), I think we will need to address that separately in the future. Similarly, the search-bar-color is not sufficiently contrasting with the card-bg-color in many themes, including these new ones and many existing ones.