Add Everforest color themes by DontBlameMe99 · Pull Request #6468 · FreeTubeApp/FreeTube

DontBlameMe99 · 2024-12-28T21:46:22Z

Add the everforest color themes

Pull Request Type

Bugfix
Feature Implementation
Documentation
Other

Related issue

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.

Adds the Everforest color scheme

This compresses the svg file sizes by using https://svgoptimizer.com

Fixes the light secondary accent colors. Previously they were only three letters, which led to unmatching, ugly looking colors.

efb4f5ff-1298-471a-8973-3d47447115dc · 2024-12-29T00:15:02Z

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 · 2024-12-29T00:18:21Z

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 · 2024-12-29T00:34:04Z

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 · 2024-12-29T00:35:08Z

im not seeing Turquoise anywhere in the pallete

DontBlameMe99 · 2024-12-29T00:40:07Z

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:

src/renderer/components/ThemeSettings.vue

efb4f5ff-1298-471a-8973-3d47447115dc · 2024-12-29T00:49:15Z

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

Renames the turquoise accent color to aqua, matching the official name of the palette.

This keeps the a-z sorting in the ThemeSettings.vue file

Changes the css I have missed from turquoise to aqua

DontBlameMe99 · 2024-12-29T00:58:21Z

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

src/renderer/composables/colors.js

src/renderer/helpers/colors.js

This also applies the a-z sorting in the colors.js files.

DontBlameMe99 · 2025-01-29T06:46:28Z

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 · 2025-01-30T17:48:25Z

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

Makes the medium dark nav bar color match the other theme variants

DontBlameMe99 · 2025-01-30T19:15:43Z

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 · 2025-01-30T20:17:41Z

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.

src/renderer/themes.css

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?

Co-authored-by: efb4f5ff-1298-471a-8973-3d47447115dc <73130443+efb4f5ff-1298-471a-8973-3d47447115dc@users.noreply.github.com>

DontBlameMe99 · 2025-01-31T04:29:29Z

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.

kommunarr

Sorry for the delay, I have been preoccupied with other duties. LGTM!

* feat: add everforest color scheme Adds the Everforest color scheme * perf: compress svg file sizes This compresses the svg file sizes by using https://svgoptimizer.com * fix: fix light secondary accent colors Fixes the light secondary accent colors. Previously they were only three letters, which led to unmatching, ugly looking colors. * refactor: rename turquoise to aqua Renames the turquoise accent color to aqua, matching the official name of the palette. * refactor: keep a-z sorting in themesettings This keeps the a-z sorting in the ThemeSettings.vue file * fix: change missing css from turquoise to aqua Changes the css I have missed from turquoise to aqua * feat: apply a-z sorting in color.js files This also applies the a-z sorting in the colors.js files. * fix: change light low card bg color for contrast ratio Modifies the Everforest Light Low bg-color to a lighter value, so the contrast ratio matches the required 4.5+ * Rename missed Turquoise to Aqua Co-authored-by: efb4f5ff-1298-471a-8973-3d47447115dc <73130443+efb4f5ff-1298-471a-8973-3d47447115dc@users.noreply.github.com> * fix: add missing css * fix: add icons to missing css This adds the logo icons to the "missing css" which is found when the setting "match top bar with main color" is enabled * fix: correct light color ordering Corrects the light color ordering from dark -> light (instead of light -> dark) * fix: improve contrast ratio * feat: light accent color contrast Fixed the colorscheme with the light theme accent colors, by decreasing their lightness. * fix: update colors in colors.js Updates the colors in the colors.js file to match the ones in the colors.css file * fix: make index.js use the correct bg colors * fix: make medium dark nav color match theme Makes the medium dark nav bar color match the other theme variants * Fix themes.css side-nav-color Co-authored-by: efb4f5ff-1298-471a-8973-3d47447115dc <73130443+efb4f5ff-1298-471a-8973-3d47447115dc@users.noreply.github.com> --------- Co-authored-by: DontBlameMe <32d1938e-18da-413a-853a-ccec6ded1347@slmails.com> Co-authored-by: efb4f5ff-1298-471a-8973-3d47447115dc <73130443+efb4f5ff-1298-471a-8973-3d47447115dc@users.noreply.github.com> Co-authored-by: DontBlameMe <dontblameme@noreply.codeberg.org>

mgonrui · 2025-07-15T21:03:59Z

Sorry to bother, I'm in v0.23.5 and the theme does not appear in the settings menu. Am I missing something?

efb4f5ff-1298-471a-8973-3d47447115dc · 2025-07-15T21:06:10Z

@mgonrui it will be available in v0.24.0

DontBlameMe added 3 commits December 28, 2024 22:26

feat: add everforest color scheme

3530045

Adds the Everforest color scheme

perf: compress svg file sizes

0f2db19

This compresses the svg file sizes by using https://svgoptimizer.com

fix: fix light secondary accent colors

f3b2a57

Fixes the light secondary accent colors. Previously they were only three letters, which led to unmatching, ugly looking colors.

FreeTubeBot enabled auto-merge (squash) December 28, 2024 21:46

github-actions bot added the PR: waiting for review For PRs that are complete, tested, and ready for review label Dec 28, 2024

efb4f5ff-1298-471a-8973-3d47447115dc reviewed Dec 29, 2024

View reviewed changes

src/renderer/components/ThemeSettings.vue Outdated Show resolved Hide resolved

efb4f5ff-1298-471a-8973-3d47447115dc added U: Waiting for Response from Author and removed PR: waiting for review For PRs that are complete, tested, and ready for review labels Dec 29, 2024

auto-merge was automatically disabled December 29, 2024 00:52
Head branch was pushed to by a user without write access

refactor: rename turquoise to aqua

ae65d0c

Renames the turquoise accent color to aqua, matching the official name of the palette.

FreeTubeBot enabled auto-merge (squash) December 29, 2024 00:52

efb4f5ff-1298-471a-8973-3d47447115dc added PR: changes requested and removed U: Waiting for Response from Author labels Dec 29, 2024

auto-merge was automatically disabled December 29, 2024 00:55
Head branch was pushed to by a user without write access

refactor: keep a-z sorting in themesettings

2c8f264

This keeps the a-z sorting in the ThemeSettings.vue file

FreeTubeBot enabled auto-merge (squash) December 29, 2024 00:55

fix: change missing css from turquoise to aqua

b9fbd56

Changes the css I have missed from turquoise to aqua

auto-merge was automatically disabled December 29, 2024 00:57
Head branch was pushed to by a user without write access

FreeTubeBot enabled auto-merge (squash) December 29, 2024 00:57

efb4f5ff-1298-471a-8973-3d47447115dc reviewed Dec 29, 2024

View reviewed changes

src/renderer/composables/colors.js Outdated Show resolved Hide resolved

efb4f5ff-1298-471a-8973-3d47447115dc reviewed Dec 29, 2024

View reviewed changes

src/renderer/helpers/colors.js Outdated Show resolved Hide resolved

auto-merge was automatically disabled December 29, 2024 01:11
Head branch was pushed to by a user without write access

feat: apply a-z sorting in color.js files

6b400fe

This also applies the a-z sorting in the colors.js files.

auto-merge was automatically disabled January 29, 2025 06:46
Head branch was pushed to by a user without write access

fix: make index.js use the correct bg colors

f40448d

FreeTubeBot enabled auto-merge (squash) January 29, 2025 06:46

auto-merge was automatically disabled January 30, 2025 19:15
Head branch was pushed to by a user without write access

FreeTubeBot enabled auto-merge (squash) January 30, 2025 19:15

fix: make medium dark nav color match theme

3bae8e6

Makes the medium dark nav bar color match the other theme variants

efb4f5ff-1298-471a-8973-3d47447115dc reviewed Jan 30, 2025

View reviewed changes

src/renderer/themes.css Outdated Show resolved Hide resolved

efb4f5ff-1298-471a-8973-3d47447115dc reviewed Jan 30, 2025

View reviewed changes

efb4f5ff-1298-471a-8973-3d47447115dc mentioned this pull request Jan 30, 2025

Update side-nav-colors of black and dracula theme #6673

Merged

1 task

Fix themes.css side-nav-color

2026564

Co-authored-by: efb4f5ff-1298-471a-8973-3d47447115dc <73130443+efb4f5ff-1298-471a-8973-3d47447115dc@users.noreply.github.com>

auto-merge was automatically disabled January 31, 2025 04:27
Head branch was pushed to by a user without write access

FreeTubeBot enabled auto-merge (squash) January 31, 2025 04:28

DontBlameMe99 requested review from efb4f5ff-1298-471a-8973-3d47447115dc and kommunarr February 9, 2025 00:54

kommunarr added PR: waiting for review For PRs that are complete, tested, and ready for review and removed PR: changes requested labels Feb 18, 2025

kommunarr approved these changes Feb 18, 2025

View reviewed changes

efb4f5ff-1298-471a-8973-3d47447115dc approved these changes Feb 19, 2025

View reviewed changes

absidue approved these changes Feb 23, 2025

View reviewed changes

FreeTubeBot merged commit 2a193a7 into FreeTubeApp:development Feb 23, 2025
6 checks passed

github-actions bot removed the PR: waiting for review For PRs that are complete, tested, and ready for review label Feb 23, 2025

Conversation

DontBlameMe99 commented Dec 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Add the everforest color themes

Pull Request Type

Related issue

Description

Screenshots

Testing

Uh oh!

efb4f5ff-1298-471a-8973-3d47447115dc commented Dec 29, 2024

Uh oh!

DontBlameMe99 commented Dec 29, 2024

Uh oh!

efb4f5ff-1298-471a-8973-3d47447115dc commented Dec 29, 2024

Uh oh!

efb4f5ff-1298-471a-8973-3d47447115dc commented Dec 29, 2024

Uh oh!

DontBlameMe99 commented Dec 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

efb4f5ff-1298-471a-8973-3d47447115dc commented Dec 29, 2024

Uh oh!

DontBlameMe99 commented Dec 29, 2024

Uh oh!

Uh oh!

Uh oh!

DontBlameMe99 commented Jan 29, 2025

Uh oh!

efb4f5ff-1298-471a-8973-3d47447115dc commented Jan 30, 2025

Uh oh!

DontBlameMe99 commented Jan 30, 2025

Uh oh!

efb4f5ff-1298-471a-8973-3d47447115dc commented Jan 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

efb4f5ff-1298-471a-8973-3d47447115dc left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DontBlameMe99 commented Jan 31, 2025

Uh oh!

kommunarr left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mgonrui commented Jul 15, 2025

Uh oh!

efb4f5ff-1298-471a-8973-3d47447115dc commented Jul 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

DontBlameMe99 commented Dec 28, 2024 •

edited

Loading

DontBlameMe99 commented Dec 29, 2024 •

edited

Loading

efb4f5ff-1298-471a-8973-3d47447115dc commented Jan 30, 2025 •

edited

Loading

efb4f5ff-1298-471a-8973-3d47447115dc left a comment •

edited

Loading

efb4f5ff-1298-471a-8973-3d47447115dc commented Jul 15, 2025 •

edited

Loading