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]

Hi @DontBlameMe99, could you group the primary and secondary solarized theme colors by light and dark respectively? Dracula code for reference:

Primary colors

FreeTube/src/renderer/themes.css

Lines 439 to 454 in 8d5b299

	.mainDraculaCyan,
	.mainDraculaGreen,
	.mainDraculaOrange,
	.mainDraculaRed,
	.mainDraculaYellow {
	--text-with-main-color: #282A36;
	--logo-icon-bar-color: url("../../_icons/iconDraculaDarkSmall.svg");
	--logo-text-bar-color: url("../../_icons/textDraculaDarkSmall.svg");
	}
	.mainDraculaPink,
	.mainDraculaPurple {
	--text-with-main-color: #F8F8F2;
	--logo-icon-bar-color: url("../../_icons/iconDraculaLightSmall.svg");
	--logo-text-bar-color: url("../../_icons/textDraculaLightSmall.svg");
	}

Secondary colors

FreeTube/src/renderer/themes.css

Lines 887 to 898 in 8d5b299

	.secDraculaCyan,
	.secDraculaGreen,
	.secDraculaOrange,
	.secDraculaRed,
	.secDraculaYellow {
	--text-with-accent-color: #212121;
	}
	.secDraculaPink,
	.secDraculaPurple {
	--text-with-accent-color: #F8F8F2;
	}

[DontBlameMe99]

Hi @DontBlameMe99, could you group the primary and secondary solarized theme colors by light and dark respectively? Dracula code for reference:

Primary colors

FreeTube/src/renderer/themes.css

Lines 439 to 454 in 8d5b299

	.mainDraculaCyan,
	.mainDraculaGreen,
	.mainDraculaOrange,
	.mainDraculaRed,
	.mainDraculaYellow {
	--text-with-main-color: #282A36;
	--logo-icon-bar-color: url("../../_icons/iconDraculaDarkSmall.svg");
	--logo-text-bar-color: url("../../_icons/textDraculaDarkSmall.svg");
	}
	.mainDraculaPink,
	.mainDraculaPurple {
	--text-with-main-color: #F8F8F2;
	--logo-icon-bar-color: url("../../_icons/iconDraculaLightSmall.svg");
	--logo-text-bar-color: url("../../_icons/textDraculaLightSmall.svg");
	}

Secondary colors

FreeTube/src/renderer/themes.css

Lines 887 to 898 in 8d5b299

	.secDraculaCyan,
	.secDraculaGreen,
	.secDraculaOrange,
	.secDraculaRed,
	.secDraculaYellow {
	--text-with-accent-color: #212121;
	}
	.secDraculaPink,
	.secDraculaPurple {
	--text-with-accent-color: #F8F8F2;
	}

implemented what you requested. I think the color contrast should be fine now, I checked everything on the provided website.

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