Add Solarized dark and Solarized light color scheme

[DontBlameMe99]

Add Solarized dark and Solarized light color scheme

Pull Request Type

• Bugfix
• Feature Implementation
• Documentation
• Other

Description

I implemented the solarized dark and light color scheme, its accent colors and corresponding icons.
https://github.com/altercation/solarized

Things I added:

• Base Theme Solarized Dark
• Base Theme Solarized Light
• Main/Secondary Color Theme Solarized Yellow
• Main/Secondary Color Theme Solarized Orange
• Main/Secondary Color Theme Solarized Red
• Main/Secondary Color Theme Solarized Magenta
• Main/Secondary Color Theme Solarized Violet
• Main/Secondary Color Theme Solarized Blue
• Main/Secondary Color Theme Solarized Cyan
• Main/Secondary Color Theme Solarized Green

Screenshots

Desktop

• OS: Linux
• FreeTube version: Latest development branch

[kommunarr]

Thanks for the PR! You'll also need to modify the ft-share-button SCSS (note to team: we should honestly centralize this in themes.css in the future as this is very easy to miss). What this governs is what version of the Invidious and YouTube logos show when you click the "Share" icon under a video. If the logo is too dark / bright to see with a given base theme, it means it needs to put it in with either the dark or light colors in that file.

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

Everything LGTM, im a bit confused why dark and light theme have the same return value
https://github.com/FreeTubeApp/FreeTube/pull/5066/files#diff-f4ca67281c6be819c2166841d7631ffd5316d4c3a3b40e01a512c4113a537b2cR630

Will approve after @jasonhenriquez signs off

[DontBlameMe99]

Everything LGTM, im a bit confused why dark and light theme have the same return value https://github.com/FreeTubeApp/FreeTube/pull/5066/files#diff-f4ca67281c6be819c2166841d7631ffd5316d4c3a3b40e01a512c4113a537b2cR630

Will approve after @jasonhenriquez signs off

Honestly because I don't really understand what they mean (in terms of what they are used for), and therefore I don't know what the light/dark one should be

[kommunarr]

Honestly because I don't really understand what they mean (in terms of what they are used for), and therefore I don't know what the light/dark one should be

This is the startup color while the app is loading. You should have it match the main bg-color for that given theme.

[DontBlameMe99]

Honestly because I don't really understand what they mean (in terms of what they are used for), and therefore I don't know what the light/dark one should be

This is the startup color while the app is loading. You should have it match the main bg-color for that given theme.

Thanks, I'll change it!

[DontBlameMe99]

Both things have been changed, I hope this is what you meant :) @jasonhenriquez

[kommunarr]

Thanks for the quick responses to feedback, I know theme additions can be a hassle. LGTM!

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

Thankyou for putting this together @DontBlameMe99 !

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

@DontBlameMe99 i noticed that Solarized Light looks like this. The distinction between the search, refresh and subscription page is gone. That white space in between.

Should look like

[DontBlameMe99]

@efb4f5ff-1298-471a-8973-3d47447115dc This problem is present in way more themes. It is due to the --primary-shadow-color: not being present. In the dark theme it is done/achieved pretty easily by just adding the theme name in

.system[data-system-theme*='dark'],
.dark,
.dracula,
.catppuccinMocha,
.hotPink,
.nordic,
.solarizedDark,
.gruvboxDark,
.catppuccinFrappe,
.everforestDarkHard,
.everforestDarkMedium,
.everforestDarkLow {
  --primary-shadow-color: rgb(0 0 0 / 75%);

  .invidiousLogo {
    background-image: url('./assets/img/invidious-logo-dark.svg');
  }

  .youtubeLogo {
    filter: brightness(0.868);
  }
}

.black .youtubeLogo {
  filter: brightness(0.933);
}

.black .invidiousLogo {
  background-image: url('./assets/img/invidious-logo-dark.svg');
}

which is something I am doing all the time. For the light variant no such "simple block" is present, and it is up to every theme itself to implement the shadow color. Instead of doing this, would it be inteligent to create such a block for the light theme variants?

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

I do think it would make sense to create such a block for light themes but i would like @kommunarr opinion on it before we go forward with it

[DontBlameMe99]

@efb4f5ff-1298-471a-8973-3d47447115dc Should I just manually implement it for #6468, ignore it or just wait?

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

Lets wait, i want to know Jason's thoughts first

[kommunarr]

Yeah I think it makes sense to have a light theme default and still allow theme-specific overrides if it doesn't fit visually

[DontBlameMe99]

Yeah I think it makes sense to have a light theme default and still allow theme-specific overrides if it doesn't fit visually

Is this something that should be done after the PR #6468 is merged or before?

[kommunarr]

Parallel to is fine, probably this fix should be merged first in terms of ease of review