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]

Need to love that the color scheme itself just doesn't have good contrast :D
Fixed, @kommunarr / @efb4f5ff-1298-471a-8973-3d47447115dc

[kommunarr]

Thanks @DontBlameMe99, could you post the color contrast links / screenshots so we could both more quickly validate?

[DontBlameMe99]

Sure,
https://coolors.co/contrast-checker/d83532-f3ead3
https://coolors.co/contrast-checker/d55d0f-f3ead3
https://coolors.co/contrast-checker/a96e00-f3ead3
https://coolors.co/contrast-checker/6d8100-f3ead3
https://coolors.co/contrast-checker/25976c-f3ead3
https://coolors.co/contrast-checker/2a84b5-f3ead3
https://coolors.co/contrast-checker/cf59aa-f3ead3

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

Light low still has some issues but maybe they are acceptable? CC: @kommunarr

• https://coolors.co/contrast-checker/cf59aa-e5dfc5
• https://coolors.co/contrast-checker/d55d0f-e5dfc5
• https://coolors.co/contrast-checker/25976c-e5dfc5

[DontBlameMe99]

Light low still has some issues but maybe they are acceptable? CC: @kommunarr

* https://coolors.co/contrast-checker/cf59aa-e5dfc5

* https://coolors.co/contrast-checker/d55d0f-e5dfc5

* https://coolors.co/contrast-checker/25976c-e5dfc5

Oh its needed to check the side nav color as well? I thought only the bg one?

[kommunarr]

Oh its needed to check the side nav color as well?

I don't believe so - although I'm realizing your index.js color choices don't seem to correspond to the right colors, which may be what caused the confusion. They should correspond to the bg-color as we note here:

FreeTube/src/main/index.js

Line 632 in b5b60f1

// Uses the --bg-color for each corresponding theme

[DontBlameMe99]

Oh its needed to check the side nav color as well?

I don't believe so - although I'm realizing your index.js color choices don't seem to correspond to the right colors, which may be what caused the confusion. They should correspond to the bg-color as we note here:

FreeTube/src/main/index.js

Line 632 in b5b60f1

// Uses the --bg-color for each corresponding theme

Thanks for pointing this outt It has been fixed.

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

Dark Medium has a darker side bar compared to the other components. You can see that Dark Hard en Low have the same color for almost all components. Is there a particular reason for this?

VirtualBoxVM_VIBloYfJRx.mp4

[DontBlameMe99]

Dark Medium has a darker side bar compared to the other components. You can see that Dark Hard en Low have the same color for almost all components. Is there a particular reason for this?
VirtualBoxVM_VIBloYfJRx.mp4

Thanks for pointing this out. I somehow messed up the color when creating this variant. It has now been fixed!

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

Offtopic Dracula seems to have the same issue? If it even is an issue?

Might be an assumption that the side bar is part of Selection?

I think that i will create a PR for this as no other theme does this except for Black but that is just a weird theme overall.

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

Maybe im looking at this one too long but it seems like the gaps between these components appears smaller when switching to Light Low. I know that isnt happening but the colors make it look like that. Again im looking at this PR for way too long so this could be a nothing burger

VirtualBoxVM_g0GZWfeORp.mp4

@kommunarr is this concerning?

[DontBlameMe99]

Maybe im looking at this one too long but it seems like the gaps between these components appears smaller when switching to Light Low. I know that isnt happening but the colors make it look like that. Again im looking at this PR for way too long so this could be a nothing burger
VirtualBoxVM_g0GZWfeORp.mp4

I think this only looks like it because the contrast in there is small. I don't think it's possible for the size to change, since I am not touching any CSS which does that.