From ce941edd39a415610013b5a1cd6dae4698d8bb63 Mon Sep 17 00:00:00 2001 From: DontBlameMe99 <167469818+DontBlameMe99@users.noreply.github.com> Date: Thu, 17 Oct 2024 18:45:45 +0200 Subject: [PATCH 01/18] Add: Gruvbox color schemes & accent colors Implements/adds the Gruvbox Dark Gruvbox Light color schemes. Also adds all the accent colors (Red, Green, Yellow, Blue, Purple, Aqua and Orange) --- _icons/iconGruvboxDarkSmall.svg | 4 + _icons/iconGruvboxLightSmall.svg | 4 + _icons/textGruvboxDarkSmall.svg | 4 + _icons/textGruvboxLightSmall.svg | 4 + src/main/index.js | 10 +- .../theme-settings/theme-settings.js | 8 +- src/renderer/helpers/colors.js | 15 ++ src/renderer/themes.css | 178 +++++++++++++++++- static/locales/en-US.yaml | 9 + 9 files changed, 230 insertions(+), 6 deletions(-) create mode 100644 _icons/iconGruvboxDarkSmall.svg create mode 100644 _icons/iconGruvboxLightSmall.svg create mode 100644 _icons/textGruvboxDarkSmall.svg create mode 100644 _icons/textGruvboxLightSmall.svg diff --git a/_icons/iconGruvboxDarkSmall.svg b/_icons/iconGruvboxDarkSmall.svg new file mode 100644 index 000000000..e02238070 --- /dev/null +++ b/_icons/iconGruvboxDarkSmall.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/_icons/iconGruvboxLightSmall.svg b/_icons/iconGruvboxLightSmall.svg new file mode 100644 index 000000000..8750e7bb3 --- /dev/null +++ b/_icons/iconGruvboxLightSmall.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/_icons/textGruvboxDarkSmall.svg b/_icons/textGruvboxDarkSmall.svg new file mode 100644 index 000000000..00ece3081 --- /dev/null +++ b/_icons/textGruvboxDarkSmall.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/_icons/textGruvboxLightSmall.svg b/_icons/textGruvboxLightSmall.svg new file mode 100644 index 000000000..266390e3a --- /dev/null +++ b/_icons/textGruvboxLightSmall.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/main/index.js b/src/main/index.js index 10ca46343..3e2c97958 100644 --- a/src/main/index.js +++ b/src/main/index.js @@ -455,7 +455,7 @@ function runApp() { requestHeaders.Authorization = invidiousAuthorization.authorization } } - + callback({ requestHeaders }) }) @@ -466,7 +466,7 @@ function runApp() { if (responseHeaders) { delete responseHeaders['set-cookie'] } - + callback({ responseHeaders }) }) @@ -662,6 +662,10 @@ function runApp() { return '#002B36' case 'solarized-light': return '#fdf6e3' + case 'gruvbox-dark': + return '#282828' + case 'gruvbox-light': + return '#fbf1c7' case 'system': default: return nativeTheme.shouldUseDarkColors ? '#212121' : '#f1f1f1' @@ -757,7 +761,7 @@ function runApp() { // If called multiple times // Duplicate menu items will be added if (replaceMainWindow) { - + setMenu() } diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js index fc018ab45..c7931ce01 100644 --- a/src/renderer/components/theme-settings/theme-settings.js +++ b/src/renderer/components/theme-settings/theme-settings.js @@ -46,7 +46,9 @@ export default defineComponent({ 'catppuccinMocha', 'dracula', 'solarizedDark', - 'solarizedLight' + 'solarizedLight', + 'gruvboxDark', + 'gruvboxLight' ] } }, @@ -118,7 +120,9 @@ export default defineComponent({ this.$t('Settings.Theme Settings.Base Theme.Catppuccin Mocha'), this.$t('Settings.Theme Settings.Base Theme.Dracula'), this.$t('Settings.Theme Settings.Base Theme.Solarized Dark'), - this.$t('Settings.Theme Settings.Base Theme.Solarized Light') + this.$t('Settings.Theme Settings.Base Theme.Solarized Light'), + this.$t('Settings.Theme Settings.Base Theme.Gruvbox Dark'), + this.$t('Settings.Theme Settings.Base Theme.Gruvbox Light') ] }, diff --git a/src/renderer/helpers/colors.js b/src/renderer/helpers/colors.js index cd1e1d4ae..8e6c8e025 100644 --- a/src/renderer/helpers/colors.js +++ b/src/renderer/helpers/colors.js @@ -47,6 +47,13 @@ export const colors = [ { name: 'SolarizedBlue', value: '#268bd2' }, { name: 'SolarizedCyan', value: '#2aa198' }, { name: 'SolarizedGreen', value: '#859900' }, + { name: 'GruvboxRed', value: '#fb4934' }, + { name: 'GruvboxGreen', value: '#b8bb26' }, + { name: 'GruvboxYellow', value: '#fabd2f' }, + { name: 'GruvboxBlue', value: '#83a593' }, + { name: 'GruvboxPurple', value: '#d3869b' }, + { name: 'GruvboxAqua', value: '#8ec07c' }, + { name: 'GruvboxOrange', value: '#fe8019' }, ] export function getColorTranslations() { @@ -96,6 +103,14 @@ export function getColorTranslations() { i18n.t('Settings.Theme Settings.Main Color Theme.Solarized Blue'), i18n.t('Settings.Theme Settings.Main Color Theme.Solarized Cyan'), i18n.t('Settings.Theme Settings.Main Color Theme.Solarized Green'), + + i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Red'), + i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Green'), + i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Yellow'), + i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Blue'), + i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Purple'), + i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Aqua'), + i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Orange'), ] } diff --git a/src/renderer/themes.css b/src/renderer/themes.css index 4765a3042..86420af33 100644 --- a/src/renderer/themes.css +++ b/src/renderer/themes.css @@ -85,7 +85,8 @@ it can be safely elided. This looks quite pleasant on this theme. */ .catppuccinMocha, .hotPink, .nordic, -.solarizedDark { +.solarizedDark, +.gruvboxDark { --primary-shadow-color: rgb(0 0 0 / 75%); .invidiousLogo { @@ -353,6 +354,44 @@ it can be safely elided. This looks quite pleasant on this theme. */ --logo-text: url('../../_icons/textSolarizedDarkSmall.svg'); } +.gruvboxDark { + --primary-text-color: #ebdbb2; + --secondary-text-color: #d5c4a1; + --tertiary-text-color: #d5c4a1; + --title-color: #ebdbb2; + --bg-color: #282828; + --favorite-icon-color: #0f0; + --card-bg-color: #504945; + --secondary-card-bg-color: #3c3836; + --scrollbar-color: #665c54; + --scrollbar-color-hover: #504945; + --side-nav-color: #504945; + --side-nav-hover-color: #665c54; + --side-nav-active-color: #504945; + --search-bar-color: #1d2021; + --logo-icon: url('../../_icons/iconGruvboxLightSmall.svg'); + --logo-text: url('../../_icons/textGruvboxLightSmall.svg'); +} + +.gruvboxLight { + --primary-text-color: #3c3836; + --secondary-text-color: #282828; + --tertiary-text-color: #282828; + --title-color: #3c3836; + --bg-color: #fbf1c7; + --favorite-icon-color: #0f0; + --card-bg-color: #ebdbb2; + --secondary-card-bg-color: #d5c4a1; + --scrollbar-color: #bdae93; + --scrollbar-color-hover: #ebdbb2; + --side-nav-color: #ebdbb2; + --side-nav-hover-color: #bdae93; + --side-nav-active-color: #ebdbb2; + --search-bar-color: #a89984; + --logo-icon: url('../../_icons/iconGruvboxDarkSmall.svg'); + --logo-text: url('../../_icons/textGruvboxDarkSmall.svg'); +} + /*************** PRIMARY THEME COLOR DEFINTIONS ***************/ @@ -710,6 +749,53 @@ it can be safely elided. This looks quite pleasant on this theme. */ --primary-color-active: #c5d940; } +.mainGruvboxRed { + --primary-color: #fb4934; + --primary-color-hover: #fd6954; + --primary-color-active: #ff8974; +} + +.mainGruvboxGreen { + --primary-color: #b8bb26; + --primary-color-hover: #d8db46; + --primary-color-active: #f8fb66; +} + +.mainGruvboxYellow { + --primary-color: #fabd2f; + --primary-color-hover: #fcd54f; + --primary-color-active: #fed76f; +} + +.mainGruvboxBlue { + --primary-color: #83a598; + --primary-color-hover: #a3c5b8; + --primary-color-active: #c3e2d8; +} + +.mainGruvboxPurple { + --primary-color: #d3869b; + --primary-color-hover: #f3a6b8; + --primary-color-active: #f3a6b8; +} + +.mainGruvboxAqua { + --primary-color: #8ec07c; + --primary-color-hover: #aec29c; + --primary-color-active: #cec59c; +} + +.mainGruvboxOrange { + --primary-color: #fe8019; + --primary-color-hover: #fe9a39; + --primary-color-active: #feb259; +} + +.mainGruvboxGreen, +.mainGruvboxYellow { + --text-with-main-color: #3c3836; +} + /*************** SECONDARY THEME COLOR DEFINTIONS ***************/ @@ -1318,6 +1404,96 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-opacity4: rgb(101 119 0 / 24%); } +.secGruvboxRed { + --accent-color: #cc241d; + --accent-color-hover: #d23c2a; + --accent-color-active: #a61f1f; + --accent-color-light: #fb4934; + --accent-color-visited: #a61f1f; + --accent-color-opacity1: rgb(204 36 29 / 4%); + --accent-color-opacity2: rgb(204 36 29 / 12%); + --accent-color-opacity3: rgb(204 36 29 / 16%); + --accent-color-opacity4: rgb(204 36 29 / 24%); +} + +.secGruvboxGreen { + --accent-color: #98971a; + --accent-color-hover: #b9b93a; + --accent-color-active: #d9d95a; + --accent-color-light: #b8bb26; + --accent-color-visited: #98971a; + --accent-color-opacity1: rgb(152 151 26 / 4%); + --accent-color-opacity2: rgb(152 151 26 / 12%); + --accent-color-opacity3: rgb(152 151 26 / 16%); + --accent-color-opacity4: rgb(152 151 26 / 24%); +} + +.secGruvboxYellow { + --accent-color: #d79921; + --accent-color-hover: #f0b839; + --accent-color-active: #f0b839; + --accent-color-light: #fabd2f; + --accent-color-visited: #d79921; + --accent-color-opacity1: rgb(215 153 33 / 4%); + --accent-color-opacity2: rgb(215 153 33 / 12%); + --accent-color-opacity3: rgb(215 153 33 / 16%); + --accent-color-opacity4: rgb(215 153 33 / 24%); +} + +.secGruvboxBlue { + --accent-color: #458588; + --accent-color-hover: #68948a; + --accent-color-active: #68948a; + --accent-color-light: #83a598; + --accent-color-visited: #458588; + --accent-color-opacity1: rgb(69 133 136 / 4%); + --accent-color-opacity2: rgb(69 133 136 / 12%); + --accent-color-opacity3: rgb(69 133 136 / 16%); + --accent-color-opacity4: rgb(69 133 136 / 24%); +} + +.secGruvboxPurple { + --accent-color: #b16286; + --accent-color-hover: #d3869b; + --accent-color-active: #d3869b; + --accent-color-light: #d3869b; + --accent-color-visited: #b16286; + --accent-color-opacity1: rgb(177 98 134 / 4%); + --accent-color-opacity2: rgb(177 98 134 / 12%); + --accent-color-opacity3: rgb(177 98 134 / 16%); + --accent-color-opacity4: rgb(177 98 134 / 24%); +} + +.secGruvboxAqua { + --accent-color: #689d6a; + --accent-color-hover: #8ec07c; + --accent-color-active: #8ec07c; + --accent-color-light: #8ec07c; + --accent-color-visited: #689d6a; + --accent-color-opacity1: rgb(104 157 106 / 4%); + --accent-color-opacity2: rgb(104 157 106 / 12%); + --accent-color-opacity3: rgb(104 157 106 / 16%); + --accent-color-opacity4: rgb(104 157 106 / 24%); +} + +.secGruvboxOrange { + --accent-color: #d65d0e; + --accent-color-hover: #f2804f; + --accent-color-active: #f2804f; + --accent-color-light: #fe8019; + --accent-color-visited: #d65d0e; + --accent-color-opacity1: rgb(214 93 14 / 4%); + --accent-color-opacity2: rgb(214 93 14 / 12%); + --accent-color-opacity3: rgb(214 93 14 / 16%); + --accent-color-opacity4: rgb(214 93 14 / 24%); +} + +.secGruvboxGreen, +.secGruvboxYellow { + --text-with-accent-color: #3c3836; +} + + /*************** DESTRUCTIVE THEME COLOR OVERRIDES ***************/ diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml index 154162be9..8b3168c26 100644 --- a/static/locales/en-US.yaml +++ b/static/locales/en-US.yaml @@ -346,6 +346,8 @@ Settings: Nordic: Nordic Solarized Dark: Solarized Dark Solarized Light: Solarized Light + Gruvbox Dark: Gruvbox Dark + Gruvbox Light: Gruvbox Light Main Color Theme: Main Color Theme: Main Color Theme Red: Red @@ -393,6 +395,13 @@ Settings: Solarized Blue: Solarized Blue Solarized Cyan: Solarized Cyan Solarized Green: Solarized Green + Gruvbox Red: Gruvbox Red + Gruvbox Green: Gruvbox Green + Gruvbox Yellow: Gruvbox Yellow + Gruvbox Blue: Gruvbox Blue + Gruvbox Purple: Gruvbox Purple + Gruvbox Aqua: Gruvbox Aqua + Gruvbox Orange: Gruvbox Orange Secondary Color Theme: Secondary Color Theme #* Main Color Theme Player Settings: From a7d2cdbe879babe9c8f8f245e345622a37bfe463 Mon Sep 17 00:00:00 2001 From: DontBlameMe99 <167469818+DontBlameMe99@users.noreply.github.com> Date: Thu, 17 Oct 2024 22:29:25 +0000 Subject: [PATCH 02/18] Keep A-Z sorted Co-authored-by: efb4f5ff-1298-471a-8973-3d47447115dc <73130443+efb4f5ff-1298-471a-8973-3d47447115dc@users.noreply.github.com> --- src/renderer/components/theme-settings/theme-settings.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js index c7931ce01..8913216c0 100644 --- a/src/renderer/components/theme-settings/theme-settings.js +++ b/src/renderer/components/theme-settings/theme-settings.js @@ -45,7 +45,10 @@ export default defineComponent({ // Third group 'catppuccinMocha', 'dracula', + 'gruvboxDark', + 'gruvboxLight' 'solarizedDark', + 'solarizedLight' 'solarizedLight', 'gruvboxDark', 'gruvboxLight' From 39e749a24f498b22cd8cbea1dce7505b018e4e18 Mon Sep 17 00:00:00 2001 From: DontBlameMe99 <167469818+DontBlameMe99@users.noreply.github.com> Date: Thu, 17 Oct 2024 22:33:56 +0000 Subject: [PATCH 03/18] Keep theme-settings.js sorted Keeps the file sorted from A-Z --- src/renderer/components/theme-settings/theme-settings.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js index 8913216c0..b7f73263c 100644 --- a/src/renderer/components/theme-settings/theme-settings.js +++ b/src/renderer/components/theme-settings/theme-settings.js @@ -50,8 +50,6 @@ export default defineComponent({ 'solarizedDark', 'solarizedLight' 'solarizedLight', - 'gruvboxDark', - 'gruvboxLight' ] } }, @@ -122,10 +120,10 @@ export default defineComponent({ // Third group this.$t('Settings.Theme Settings.Base Theme.Catppuccin Mocha'), this.$t('Settings.Theme Settings.Base Theme.Dracula'), - this.$t('Settings.Theme Settings.Base Theme.Solarized Dark'), - this.$t('Settings.Theme Settings.Base Theme.Solarized Light'), this.$t('Settings.Theme Settings.Base Theme.Gruvbox Dark'), this.$t('Settings.Theme Settings.Base Theme.Gruvbox Light') + this.$t('Settings.Theme Settings.Base Theme.Solarized Dark'), + this.$t('Settings.Theme Settings.Base Theme.Solarized Light'), ] }, From e020b04b99048cea049a888650241bf4f924aec2 Mon Sep 17 00:00:00 2001 From: DontBlameMe99 <167469818+DontBlameMe99@users.noreply.github.com> Date: Thu, 17 Oct 2024 22:34:52 +0000 Subject: [PATCH 04/18] Keep colors.js sorted Keeps the file sorted from A-Z --- src/renderer/helpers/colors.js | 29 ++++++++++++++--------------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/src/renderer/helpers/colors.js b/src/renderer/helpers/colors.js index 8e6c8e025..e70c3e1af 100644 --- a/src/renderer/helpers/colors.js +++ b/src/renderer/helpers/colors.js @@ -39,6 +39,13 @@ export const colors = [ { name: 'DraculaPurple', value: '#BD93F9' }, { name: 'DraculaRed', value: '#FF5555' }, { name: 'DraculaYellow', value: '#F1FA8C' }, + { name: 'GruvboxRed', value: '#fb4934' }, + { name: 'GruvboxGreen', value: '#b8bb26' }, + { name: 'GruvboxYellow', value: '#fabd2f' }, + { name: 'GruvboxBlue', value: '#83a593' }, + { name: 'GruvboxPurple', value: '#d3869b' }, + { name: 'GruvboxAqua', value: '#8ec07c' }, + { name: 'GruvboxOrange', value: '#fe8019' }, { name: 'SolarizedYellow', value: '#b58900' }, { name: 'SolarizedOrange', value: '#cb4b16' }, { name: 'SolarizedRed', value: '#dc322f' }, @@ -47,13 +54,6 @@ export const colors = [ { name: 'SolarizedBlue', value: '#268bd2' }, { name: 'SolarizedCyan', value: '#2aa198' }, { name: 'SolarizedGreen', value: '#859900' }, - { name: 'GruvboxRed', value: '#fb4934' }, - { name: 'GruvboxGreen', value: '#b8bb26' }, - { name: 'GruvboxYellow', value: '#fabd2f' }, - { name: 'GruvboxBlue', value: '#83a593' }, - { name: 'GruvboxPurple', value: '#d3869b' }, - { name: 'GruvboxAqua', value: '#8ec07c' }, - { name: 'GruvboxOrange', value: '#fe8019' }, ] export function getColorTranslations() { @@ -95,6 +95,13 @@ export function getColorTranslations() { i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Purple'), i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Red'), i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Yellow'), + i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Red'), + i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Green'), + i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Yellow'), + i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Blue'), + i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Purple'), + i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Aqua'), + i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Orange'), i18n.t('Settings.Theme Settings.Main Color Theme.Solarized Yellow'), i18n.t('Settings.Theme Settings.Main Color Theme.Solarized Orange'), i18n.t('Settings.Theme Settings.Main Color Theme.Solarized Red'), @@ -103,14 +110,6 @@ export function getColorTranslations() { i18n.t('Settings.Theme Settings.Main Color Theme.Solarized Blue'), i18n.t('Settings.Theme Settings.Main Color Theme.Solarized Cyan'), i18n.t('Settings.Theme Settings.Main Color Theme.Solarized Green'), - - i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Red'), - i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Green'), - i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Yellow'), - i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Blue'), - i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Purple'), - i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Aqua'), - i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Orange'), ] } From 695c307bfb42773d90598eb417900fff341b63cb Mon Sep 17 00:00:00 2001 From: DontBlameMe99 <167469818+DontBlameMe99@users.noreply.github.com> Date: Thu, 17 Oct 2024 22:36:01 +0000 Subject: [PATCH 05/18] Add missing commas Adds two missing commas, which because of the sorting from A-Z --- src/renderer/components/theme-settings/theme-settings.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js index b7f73263c..87a2f63f1 100644 --- a/src/renderer/components/theme-settings/theme-settings.js +++ b/src/renderer/components/theme-settings/theme-settings.js @@ -46,7 +46,7 @@ export default defineComponent({ 'catppuccinMocha', 'dracula', 'gruvboxDark', - 'gruvboxLight' + 'gruvboxLight', 'solarizedDark', 'solarizedLight' 'solarizedLight', @@ -121,7 +121,7 @@ export default defineComponent({ this.$t('Settings.Theme Settings.Base Theme.Catppuccin Mocha'), this.$t('Settings.Theme Settings.Base Theme.Dracula'), this.$t('Settings.Theme Settings.Base Theme.Gruvbox Dark'), - this.$t('Settings.Theme Settings.Base Theme.Gruvbox Light') + this.$t('Settings.Theme Settings.Base Theme.Gruvbox Light'), this.$t('Settings.Theme Settings.Base Theme.Solarized Dark'), this.$t('Settings.Theme Settings.Base Theme.Solarized Light'), ] From 4918e8f358bdb423cde2b1621ae486bb6a82d3d1 Mon Sep 17 00:00:00 2001 From: DontBlameMe99 <167469818+DontBlameMe99@users.noreply.github.com> Date: Thu, 17 Oct 2024 22:37:46 +0000 Subject: [PATCH 06/18] Keep sorting in en-US.yaml from A-Z Keeps the A-Z sorting in the en-US.yaml file --- static/locales/en-US.yaml | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml index 8b3168c26..5d35e1502 100644 --- a/static/locales/en-US.yaml +++ b/static/locales/en-US.yaml @@ -344,10 +344,10 @@ Settings: Pastel Pink: Pastel Pink Hot Pink: Hot Pink Nordic: Nordic - Solarized Dark: Solarized Dark - Solarized Light: Solarized Light Gruvbox Dark: Gruvbox Dark Gruvbox Light: Gruvbox Light + Solarized Dark: Solarized Dark + Solarized Light: Solarized Light Main Color Theme: Main Color Theme: Main Color Theme Red: Red @@ -387,6 +387,13 @@ Settings: Catppuccin Mocha Sapphire: Catppuccin Mocha Sapphire Catppuccin Mocha Blue: Catppuccin Mocha Blue Catppuccin Mocha Lavender: Catppuccin Mocha Lavender + Gruvbox Red: Gruvbox Red + Gruvbox Green: Gruvbox Green + Gruvbox Yellow: Gruvbox Yellow + Gruvbox Blue: Gruvbox Blue + Gruvbox Purple: Gruvbox Purple + Gruvbox Aqua: Gruvbox Aqua + Gruvbox Orange: Gruvbox Orange Solarized Yellow: Solarized Yellow Solarized Orange: Solarized Orange Solarized Red: Solarized Red @@ -395,13 +402,6 @@ Settings: Solarized Blue: Solarized Blue Solarized Cyan: Solarized Cyan Solarized Green: Solarized Green - Gruvbox Red: Gruvbox Red - Gruvbox Green: Gruvbox Green - Gruvbox Yellow: Gruvbox Yellow - Gruvbox Blue: Gruvbox Blue - Gruvbox Purple: Gruvbox Purple - Gruvbox Aqua: Gruvbox Aqua - Gruvbox Orange: Gruvbox Orange Secondary Color Theme: Secondary Color Theme #* Main Color Theme Player Settings: From 8761459021d563296ffa737bdc0f3f56c443baa5 Mon Sep 17 00:00:00 2001 From: DontBlameMe99 <167469818+DontBlameMe99@users.noreply.github.com> Date: Thu, 17 Oct 2024 22:41:38 +0000 Subject: [PATCH 07/18] Delete duplicate line Co-authored-by: efb4f5ff-1298-471a-8973-3d47447115dc <73130443+efb4f5ff-1298-471a-8973-3d47447115dc@users.noreply.github.com> --- src/renderer/components/theme-settings/theme-settings.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js index 87a2f63f1..75ffb8929 100644 --- a/src/renderer/components/theme-settings/theme-settings.js +++ b/src/renderer/components/theme-settings/theme-settings.js @@ -49,7 +49,6 @@ export default defineComponent({ 'gruvboxLight', 'solarizedDark', 'solarizedLight' - 'solarizedLight', ] } }, From 8390da0682fa5c79f707db66b38da0daf45bb3af Mon Sep 17 00:00:00 2001 From: DontBlameMe99 <167469818+DontBlameMe99@users.noreply.github.com> Date: Thu, 17 Oct 2024 22:53:48 +0000 Subject: [PATCH 08/18] Remove trailing comma Remove a trailing comma (,) Co-authored-by: efb4f5ff-1298-471a-8973-3d47447115dc <73130443+efb4f5ff-1298-471a-8973-3d47447115dc@users.noreply.github.com> --- src/renderer/components/theme-settings/theme-settings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js index 75ffb8929..bff594bfc 100644 --- a/src/renderer/components/theme-settings/theme-settings.js +++ b/src/renderer/components/theme-settings/theme-settings.js @@ -122,7 +122,7 @@ export default defineComponent({ this.$t('Settings.Theme Settings.Base Theme.Gruvbox Dark'), this.$t('Settings.Theme Settings.Base Theme.Gruvbox Light'), this.$t('Settings.Theme Settings.Base Theme.Solarized Dark'), - this.$t('Settings.Theme Settings.Base Theme.Solarized Light'), + this.$t('Settings.Theme Settings.Base Theme.Solarized Light') ] }, From df7add5bf0cbcd29f88679dde3708243a292f9bc Mon Sep 17 00:00:00 2001 From: DontBlameMe99 <167469818+DontBlameMe99@users.noreply.github.com> Date: Wed, 23 Oct 2024 12:48:24 +0200 Subject: [PATCH 09/18] Remove unintentional formatting Removes the unintentional formatting, automatically done by my nvim lsp. This adds the blank space back in. --- src/main/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/main/index.js b/src/main/index.js index 3e2c97958..9ecf89611 100644 --- a/src/main/index.js +++ b/src/main/index.js @@ -455,7 +455,7 @@ function runApp() { requestHeaders.Authorization = invidiousAuthorization.authorization } } - + callback({ requestHeaders }) }) @@ -466,7 +466,7 @@ function runApp() { if (responseHeaders) { delete responseHeaders['set-cookie'] } - + callback({ responseHeaders }) }) @@ -761,7 +761,7 @@ function runApp() { // If called multiple times // Duplicate menu items will be added if (replaceMainWindow) { - + setMenu() } From 2787f6969c15b23e28f540d59731fbbf417a4642 Mon Sep 17 00:00:00 2001 From: DontBlameMe99 <167469818+DontBlameMe99@users.noreply.github.com> Date: Wed, 23 Oct 2024 13:00:09 +0200 Subject: [PATCH 10/18] Fix gruvbox light video feed/status bar divider Fixes/Improves the color clarity between the status bar and the feed (the divider). --- src/renderer/themes.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/renderer/themes.css b/src/renderer/themes.css index 86420af33..173ffb256 100644 --- a/src/renderer/themes.css +++ b/src/renderer/themes.css @@ -374,6 +374,7 @@ it can be safely elided. This looks quite pleasant on this theme. */ } .gruvboxLight { + --primary-shadow-color: rgb(255 241 199 / 100%); --primary-text-color: #3c3836; --secondary-text-color: #282828; --tertiary-text-color: #282828; From e5494a0adfad9853c0cd604a6eda49479b0d81be Mon Sep 17 00:00:00 2001 From: DontBlameMe99 <167469818+DontBlameMe99@users.noreply.github.com> Date: Wed, 23 Oct 2024 13:08:39 +0200 Subject: [PATCH 11/18] Fix: Profile menu no longer blends in with Background Fixes so that the profile menu no longer blends in with the background --- src/renderer/themes.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/renderer/themes.css b/src/renderer/themes.css index 173ffb256..5c1dc3b45 100644 --- a/src/renderer/themes.css +++ b/src/renderer/themes.css @@ -364,7 +364,7 @@ it can be safely elided. This looks quite pleasant on this theme. */ --card-bg-color: #504945; --secondary-card-bg-color: #3c3836; --scrollbar-color: #665c54; - --scrollbar-color-hover: #504945; + --scrollbar-color-hover: #282828; --side-nav-color: #504945; --side-nav-hover-color: #665c54; --side-nav-active-color: #504945; @@ -384,7 +384,7 @@ it can be safely elided. This looks quite pleasant on this theme. */ --card-bg-color: #ebdbb2; --secondary-card-bg-color: #d5c4a1; --scrollbar-color: #bdae93; - --scrollbar-color-hover: #ebdbb2; + --scrollbar-color-hover: #fbf1c7; --side-nav-color: #ebdbb2; --side-nav-hover-color: #bdae93; --side-nav-active-color: #ebdbb2; From ed7ec7ebd178036e5a4a49187902f116a86550d5 Mon Sep 17 00:00:00 2001 From: DontBlameMe99 <167469818+DontBlameMe99@users.noreply.github.com> Date: Thu, 24 Oct 2024 22:18:40 +0200 Subject: [PATCH 12/18] Add Gruvbox Light accent colors - Adds the gruvbox light accent colors - Distinguishes between gruvbox light/dark colors by specifying "Gruvbox Dark Red" and "Gruvbox Light Red" --- src/renderer/helpers/colors.js | 42 ++++++---- src/renderer/themes.css | 147 +++++++++++++++++++++++++++++---- static/locales/en-US.yaml | 21 +++-- 3 files changed, 175 insertions(+), 35 deletions(-) diff --git a/src/renderer/helpers/colors.js b/src/renderer/helpers/colors.js index e70c3e1af..2f4a77c47 100644 --- a/src/renderer/helpers/colors.js +++ b/src/renderer/helpers/colors.js @@ -39,13 +39,20 @@ export const colors = [ { name: 'DraculaPurple', value: '#BD93F9' }, { name: 'DraculaRed', value: '#FF5555' }, { name: 'DraculaYellow', value: '#F1FA8C' }, - { name: 'GruvboxRed', value: '#fb4934' }, - { name: 'GruvboxGreen', value: '#b8bb26' }, - { name: 'GruvboxYellow', value: '#fabd2f' }, - { name: 'GruvboxBlue', value: '#83a593' }, - { name: 'GruvboxPurple', value: '#d3869b' }, - { name: 'GruvboxAqua', value: '#8ec07c' }, - { name: 'GruvboxOrange', value: '#fe8019' }, + { name: 'GruvboxDarkRed', value: '#fb4934' }, + { name: 'GruvboxDarkGreen', value: '#b8bb26' }, + { name: 'GruvboxDarkYellow', value: '#fabd2f' }, + { name: 'GruvboxDarkBlue', value: '#83a593' }, + { name: 'GruvboxDarkPurple', value: '#d3869b' }, + { name: 'GruvboxDarkAqua', value: '#8ec07c' }, + { name: 'GruvboxDarkOrange', value: '#fe8019' }, + { name: 'GruvboxLightRed', value: '#9d0006' }, + { name: 'GruvboxLightGreen', value: '#79740e' }, + { name: 'GruvboxLightYellow', value: '#b57614' }, + { name: 'GruvboxLightBlue', value: '#076678' }, + { name: 'GruvboxLightPurple', value: '#8f3f71' }, + { name: 'GruvboxLightAqua', value: '#427b58' }, + { name: 'GruvboxLightOrange', value: '#af3a03' }, { name: 'SolarizedYellow', value: '#b58900' }, { name: 'SolarizedOrange', value: '#cb4b16' }, { name: 'SolarizedRed', value: '#dc322f' }, @@ -95,13 +102,20 @@ export function getColorTranslations() { i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Purple'), i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Red'), i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Yellow'), - i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Red'), - i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Green'), - i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Yellow'), - i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Blue'), - i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Purple'), - i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Aqua'), - i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Orange'), + i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Dark Red'), + i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Dark Green'), + i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Dark Yellow'), + i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Dark Blue'), + i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Dark Purple'), + i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Dark Aqua'), + i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Dark Orange'), + i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Light Red'), + i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Light Green'), + i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Light Yellow'), + i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Light Blue'), + i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Light Purple'), + i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Light Aqua'), + i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Light Orange'), i18n.t('Settings.Theme Settings.Main Color Theme.Solarized Yellow'), i18n.t('Settings.Theme Settings.Main Color Theme.Solarized Orange'), i18n.t('Settings.Theme Settings.Main Color Theme.Solarized Red'), diff --git a/src/renderer/themes.css b/src/renderer/themes.css index 5c1dc3b45..d390fa2b6 100644 --- a/src/renderer/themes.css +++ b/src/renderer/themes.css @@ -750,48 +750,90 @@ it can be safely elided. This looks quite pleasant on this theme. */ --primary-color-active: #c5d940; } -.mainGruvboxRed { +.mainGruvboxDarkRed { --primary-color: #fb4934; --primary-color-hover: #fd6954; --primary-color-active: #ff8974; } -.mainGruvboxGreen { +.mainGruvboxDarkGreen { --primary-color: #b8bb26; --primary-color-hover: #d8db46; --primary-color-active: #f8fb66; } -.mainGruvboxYellow { +.mainGruvboxDarkYellow { --primary-color: #fabd2f; --primary-color-hover: #fcd54f; --primary-color-active: #fed76f; } -.mainGruvboxBlue { +.mainGruvboxDarkBlue { --primary-color: #83a598; --primary-color-hover: #a3c5b8; --primary-color-active: #c3e2d8; } -.mainGruvboxPurple { +.mainGruvboxDarkPurple { --primary-color: #d3869b; --primary-color-hover: #f3a6b8; --primary-color-active: #f3a6b8; } -.mainGruvboxAqua { +.mainGruvboxDarkAqua { --primary-color: #8ec07c; --primary-color-hover: #aec29c; --primary-color-active: #cec59c; } -.mainGruvboxOrange { +.mainGruvboxDarkOrange { --primary-color: #fe8019; --primary-color-hover: #fe9a39; --primary-color-active: #feb259; } +.mainGruvboxLightRed { + --primary-color: #9d0006; + --primary-color-hover: #bd2026; + --primary-color-active: #dd4046; +} + +.mainGruvboxLightGreen { + --primary-color: #79740e; + --primary-color-hover: #99962e; + --primary-color-active: #b9b54e; +} + +.mainGruvboxLightYellow { + --primary-color: #b57614; + --primary-color-hover: #d59634; + --primary-color-active: #f5b654; +} + +.mainGruvboxLightBlue { + --primary-color: #076678; + --primary-color-hover: #276898; + --primary-color-active: #476ab8; +} + +.mainGruvboxLightPurple { + --primary-color: #8f3f71; + --primary-color-hover: #af5f91; + --primary-color-active: #cf7fb1; +} + +.mainGruvboxLightAqua { + --primary-color: #427b58; + --primary-color-hover: #628d78; + --primary-color-active: #829f98; +} + +.mainGruvboxLightOrange { + --primary-color: #af3a03; + --primary-color-hover: #cf5a23; + --primary-color-active: #ef7a43; +} + .mainGruvboxGreen, .mainGruvboxYellow { --text-with-main-color: #3c3836; @@ -1405,7 +1447,7 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-opacity4: rgb(101 119 0 / 24%); } -.secGruvboxRed { +.secGruvboxDarkRed { --accent-color: #cc241d; --accent-color-hover: #d23c2a; --accent-color-active: #a61f1f; @@ -1417,7 +1459,7 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-opacity4: rgb(204 36 29 / 24%); } -.secGruvboxGreen { +.secGruvboxDarkGreen { --accent-color: #98971a; --accent-color-hover: #b9b93a; --accent-color-active: #d9d95a; @@ -1429,7 +1471,7 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-opacity4: rgb(152 151 26 / 24%); } -.secGruvboxYellow { +.secGruvboxDarkYellow { --accent-color: #d79921; --accent-color-hover: #f0b839; --accent-color-active: #f0b839; @@ -1441,7 +1483,7 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-opacity4: rgb(215 153 33 / 24%); } -.secGruvboxBlue { +.secGruvboxDarkBlue { --accent-color: #458588; --accent-color-hover: #68948a; --accent-color-active: #68948a; @@ -1453,7 +1495,7 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-opacity4: rgb(69 133 136 / 24%); } -.secGruvboxPurple { +.secGruvboxDarkPurple { --accent-color: #b16286; --accent-color-hover: #d3869b; --accent-color-active: #d3869b; @@ -1465,7 +1507,7 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-opacity4: rgb(177 98 134 / 24%); } -.secGruvboxAqua { +.secGruvboxDarkAqua { --accent-color: #689d6a; --accent-color-hover: #8ec07c; --accent-color-active: #8ec07c; @@ -1477,7 +1519,7 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-opacity4: rgb(104 157 106 / 24%); } -.secGruvboxOrange { +.secGruvboxDarkOrange { --accent-color: #d65d0e; --accent-color-hover: #f2804f; --accent-color-active: #f2804f; @@ -1489,6 +1531,83 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-opacity4: rgb(214 93 14 / 24%); } +.secGruvboxLightRed { + --accent-color: #cc241d; + --accent-color-hover: #d23c2a; + --accent-color-active: #a61f1f; + --accent-color-light: #fb4934; + --accent-color-visited: #a61f1f; + --accent-color-opacity1: rgb(204 36 29 / 4%); + --accent-color-opacity2: rgb(204 36 29 / 12%); + --accent-color-opacity3: rgb(204 36 29 / 16%); +} + +.secGruvboxLightGreen { + --accent-color: #98971a; + --accent-color-hover: #b9b93a; + --accent-color-active: #d9d95a; + --accent-color-light: #b8bb26; + --accent-color-visited: #98971a; + --accent-color-opacity1: rgb(152 151 26 / 4%); + --accent-color-opacity2: rgb(152 151 26 / 12%); + --accent-color-opacity3: rgb(152 151 26 / 16%); +} + +.secGruvboxLightYellow { + --accent-color: #d79921; + --accent-color-hover: #f0b839; + --accent-color-active: #f0b839; + --accent-color-light: #fabd2f; + --accent-color-visited: #d79921; + --accent-color-opacity1: rgb(215 153 33 / 4%); + --accent-color-opacity2: rgb(215 153 33 / 12%); + --accent-color-opacity3: rgb(215 153 33 / 16%); +} + +.secGruvboxLightBlue { + --accent-color: #458588; + --accent-color-hover: #68948a; + --accent-color-active: #68948a; + --accent-color-light: #83a598; + --accent-color-visited: #458588; + --accent-color-opacity1: rgb(69 133 136 / 4%); + --accent-color-opacity2: rgb(69 133 136 / 12%); + --accent-color-opacity3: rgb(69 133 136 / 16%); +} + +.secGruvboxLightPurple { + --accent-color: #b16286; + --accent-color-hover: #d3869b; + --accent-color-active: #d3869b; + --accent-color-light: #d3869b; + --accent-color-visited: #b16286; + --accent-color-opacity1: rgb(177 98 134 / 4%); + --accent-color-opacity2: rgb(177 98 134 / 12%); + --accent-color-opacity3: rgb(177 98 134 / 16%); +} + +.secGruvboxLightAqua { + --accent-color: #689d6a; + --accent-color-hover: #8ec07c; + --accent-color-active: #8ec07c; + --accent-color-light: #8ec07c; + --accent-color-visited: #689d6a; + --accent-color-opacity1: rgb(104 157 106 / 4%); + --accent-color-opacity2: rgb(104 157 106 / 12%); + --accent-color-opacity3: rgb(104 157 106 / 16%); +} + +.secGruvboxLightOrange { + --accent-color: #d65d0e; + --accent-color-hover: #f2804f; + --accent-color-active: #f2804f; + --accent-color-light: #fe8019; + --accent-color-visited: #d65d0e; + --accent-color-opacity1: rgb(214 93 14 / 4%); + --accent-color-opacity2: rgb(214 93 14 / 12%); + --accent-color-opacity3: rgb(214 93 14 / 16%); +} + .secGruvboxGreen, .secGruvboxYellow { --text-with-accent-color: #3c3836; diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml index 5d35e1502..39778f506 100644 --- a/static/locales/en-US.yaml +++ b/static/locales/en-US.yaml @@ -387,13 +387,20 @@ Settings: Catppuccin Mocha Sapphire: Catppuccin Mocha Sapphire Catppuccin Mocha Blue: Catppuccin Mocha Blue Catppuccin Mocha Lavender: Catppuccin Mocha Lavender - Gruvbox Red: Gruvbox Red - Gruvbox Green: Gruvbox Green - Gruvbox Yellow: Gruvbox Yellow - Gruvbox Blue: Gruvbox Blue - Gruvbox Purple: Gruvbox Purple - Gruvbox Aqua: Gruvbox Aqua - Gruvbox Orange: Gruvbox Orange + Gruvbox Dark Red: Gruvbox Dark Red + Gruvbox Dark Green: Gruvbox Dark Green + Gruvbox Dark Yellow: Gruvbox Dark Yellow + Gruvbox Dark Blue: Gruvbox Dark Blue + Gruvbox Dark Purple: Gruvbox Dark Purple + Gruvbox Dark Aqua: Gruvbox Dark Aqua + Gruvbox Dark Orange: Gruvbox Dark Orange + Gruvbox Light Red: Gruvbox Light Red + Gruvbox Light Green: Gruvbox Light Green + Gruvbox Light Yellow: Gruvbox Light Yellow + Gruvbox Light Blue: Gruvbox Light Blue + Gruvbox Light Purple: Gruvbox Light Purple + Gruvbox Light Aqua: Gruvbox Light Aqua + Gruvbox Light Orange: Gruvbox Light Orange Solarized Yellow: Solarized Yellow Solarized Orange: Solarized Orange Solarized Red: Solarized Red From bd09d11a0fa7304f2331883c01149f4c6ec6138c Mon Sep 17 00:00:00 2001 From: DontBlameMe99 <167469818+DontBlameMe99@users.noreply.github.com> Date: Fri, 25 Oct 2024 21:50:16 +0200 Subject: [PATCH 13/18] Remove colors with insufficient contrast Removes the colors which have insuficcient contrast: - Dark Red - Light Green - Light Yellow - Light Aqua --- src/renderer/helpers/colors.js | 8 -------- src/renderer/themes.css | 24 ------------------------ 2 files changed, 32 deletions(-) diff --git a/src/renderer/helpers/colors.js b/src/renderer/helpers/colors.js index 2f4a77c47..1b46fb6ce 100644 --- a/src/renderer/helpers/colors.js +++ b/src/renderer/helpers/colors.js @@ -39,7 +39,6 @@ export const colors = [ { name: 'DraculaPurple', value: '#BD93F9' }, { name: 'DraculaRed', value: '#FF5555' }, { name: 'DraculaYellow', value: '#F1FA8C' }, - { name: 'GruvboxDarkRed', value: '#fb4934' }, { name: 'GruvboxDarkGreen', value: '#b8bb26' }, { name: 'GruvboxDarkYellow', value: '#fabd2f' }, { name: 'GruvboxDarkBlue', value: '#83a593' }, @@ -47,11 +46,8 @@ export const colors = [ { name: 'GruvboxDarkAqua', value: '#8ec07c' }, { name: 'GruvboxDarkOrange', value: '#fe8019' }, { name: 'GruvboxLightRed', value: '#9d0006' }, - { name: 'GruvboxLightGreen', value: '#79740e' }, - { name: 'GruvboxLightYellow', value: '#b57614' }, { name: 'GruvboxLightBlue', value: '#076678' }, { name: 'GruvboxLightPurple', value: '#8f3f71' }, - { name: 'GruvboxLightAqua', value: '#427b58' }, { name: 'GruvboxLightOrange', value: '#af3a03' }, { name: 'SolarizedYellow', value: '#b58900' }, { name: 'SolarizedOrange', value: '#cb4b16' }, @@ -102,7 +98,6 @@ export function getColorTranslations() { i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Purple'), i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Red'), i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Yellow'), - i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Dark Red'), i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Dark Green'), i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Dark Yellow'), i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Dark Blue'), @@ -110,11 +105,8 @@ export function getColorTranslations() { i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Dark Aqua'), i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Dark Orange'), i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Light Red'), - i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Light Green'), - i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Light Yellow'), i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Light Blue'), i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Light Purple'), - i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Light Aqua'), i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Light Orange'), i18n.t('Settings.Theme Settings.Main Color Theme.Solarized Yellow'), i18n.t('Settings.Theme Settings.Main Color Theme.Solarized Orange'), diff --git a/src/renderer/themes.css b/src/renderer/themes.css index d390fa2b6..986f86829 100644 --- a/src/renderer/themes.css +++ b/src/renderer/themes.css @@ -750,12 +750,6 @@ it can be safely elided. This looks quite pleasant on this theme. */ --primary-color-active: #c5d940; } -.mainGruvboxDarkRed { - --primary-color: #fb4934; - --primary-color-hover: #fd6954; - --primary-color-active: #ff8974; -} - .mainGruvboxDarkGreen { --primary-color: #b8bb26; --primary-color-hover: #d8db46; @@ -798,18 +792,6 @@ it can be safely elided. This looks quite pleasant on this theme. */ --primary-color-active: #dd4046; } -.mainGruvboxLightGreen { - --primary-color: #79740e; - --primary-color-hover: #99962e; - --primary-color-active: #b9b54e; -} - -.mainGruvboxLightYellow { - --primary-color: #b57614; - --primary-color-hover: #d59634; - --primary-color-active: #f5b654; -} - .mainGruvboxLightBlue { --primary-color: #076678; --primary-color-hover: #276898; @@ -822,12 +804,6 @@ it can be safely elided. This looks quite pleasant on this theme. */ --primary-color-active: #cf7fb1; } -.mainGruvboxLightAqua { - --primary-color: #427b58; - --primary-color-hover: #628d78; - --primary-color-active: #829f98; -} - .mainGruvboxLightOrange { --primary-color: #af3a03; --primary-color-hover: #cf5a23; From 03cde44e2c307051c409687108d73c66344329c8 Mon Sep 17 00:00:00 2001 From: DontBlameMe99 <167469818+DontBlameMe99@users.noreply.github.com> Date: Fri, 25 Oct 2024 22:31:30 +0200 Subject: [PATCH 14/18] Remove unused translations --- static/locales/en-US.yaml | 4 ---- 1 file changed, 4 deletions(-) diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml index 39778f506..75c5cf37a 100644 --- a/static/locales/en-US.yaml +++ b/static/locales/en-US.yaml @@ -387,7 +387,6 @@ Settings: Catppuccin Mocha Sapphire: Catppuccin Mocha Sapphire Catppuccin Mocha Blue: Catppuccin Mocha Blue Catppuccin Mocha Lavender: Catppuccin Mocha Lavender - Gruvbox Dark Red: Gruvbox Dark Red Gruvbox Dark Green: Gruvbox Dark Green Gruvbox Dark Yellow: Gruvbox Dark Yellow Gruvbox Dark Blue: Gruvbox Dark Blue @@ -395,11 +394,8 @@ Settings: Gruvbox Dark Aqua: Gruvbox Dark Aqua Gruvbox Dark Orange: Gruvbox Dark Orange Gruvbox Light Red: Gruvbox Light Red - Gruvbox Light Green: Gruvbox Light Green - Gruvbox Light Yellow: Gruvbox Light Yellow Gruvbox Light Blue: Gruvbox Light Blue Gruvbox Light Purple: Gruvbox Light Purple - Gruvbox Light Aqua: Gruvbox Light Aqua Gruvbox Light Orange: Gruvbox Light Orange Solarized Yellow: Solarized Yellow Solarized Orange: Solarized Orange From bc2b1fb62eddd2f658dc1077de4c2ca5fe1989cd Mon Sep 17 00:00:00 2001 From: DontBlameMe99 <167469818+DontBlameMe99@users.noreply.github.com> Date: Sat, 26 Oct 2024 21:45:52 +0200 Subject: [PATCH 15/18] Remove unused css colors Removes unused css for colors: - Gruvbox Dark Red - Gruvbox Light Green - Gruvbox Light Yellow - Gruvbox Light Aqua --- src/renderer/themes.css | 45 ----------------------------------------- 1 file changed, 45 deletions(-) diff --git a/src/renderer/themes.css b/src/renderer/themes.css index 986f86829..e55c02e59 100644 --- a/src/renderer/themes.css +++ b/src/renderer/themes.css @@ -1423,18 +1423,6 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-opacity4: rgb(101 119 0 / 24%); } -.secGruvboxDarkRed { - --accent-color: #cc241d; - --accent-color-hover: #d23c2a; - --accent-color-active: #a61f1f; - --accent-color-light: #fb4934; - --accent-color-visited: #a61f1f; - --accent-color-opacity1: rgb(204 36 29 / 4%); - --accent-color-opacity2: rgb(204 36 29 / 12%); - --accent-color-opacity3: rgb(204 36 29 / 16%); - --accent-color-opacity4: rgb(204 36 29 / 24%); -} - .secGruvboxDarkGreen { --accent-color: #98971a; --accent-color-hover: #b9b93a; @@ -1518,28 +1506,6 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-opacity3: rgb(204 36 29 / 16%); } -.secGruvboxLightGreen { - --accent-color: #98971a; - --accent-color-hover: #b9b93a; - --accent-color-active: #d9d95a; - --accent-color-light: #b8bb26; - --accent-color-visited: #98971a; - --accent-color-opacity1: rgb(152 151 26 / 4%); - --accent-color-opacity2: rgb(152 151 26 / 12%); - --accent-color-opacity3: rgb(152 151 26 / 16%); -} - -.secGruvboxLightYellow { - --accent-color: #d79921; - --accent-color-hover: #f0b839; - --accent-color-active: #f0b839; - --accent-color-light: #fabd2f; - --accent-color-visited: #d79921; - --accent-color-opacity1: rgb(215 153 33 / 4%); - --accent-color-opacity2: rgb(215 153 33 / 12%); - --accent-color-opacity3: rgb(215 153 33 / 16%); -} - .secGruvboxLightBlue { --accent-color: #458588; --accent-color-hover: #68948a; @@ -1562,17 +1528,6 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-opacity3: rgb(177 98 134 / 16%); } -.secGruvboxLightAqua { - --accent-color: #689d6a; - --accent-color-hover: #8ec07c; - --accent-color-active: #8ec07c; - --accent-color-light: #8ec07c; - --accent-color-visited: #689d6a; - --accent-color-opacity1: rgb(104 157 106 / 4%); - --accent-color-opacity2: rgb(104 157 106 / 12%); - --accent-color-opacity3: rgb(104 157 106 / 16%); -} - .secGruvboxLightOrange { --accent-color: #d65d0e; --accent-color-hover: #f2804f; From aa63b5f581a2166b51f1fb6dedff1bd600db0a5a Mon Sep 17 00:00:00 2001 From: DontBlameMe99 <167469818+DontBlameMe99@users.noreply.github.com> Date: Sun, 27 Oct 2024 17:43:43 +0100 Subject: [PATCH 16/18] Improve text with accent readability Improves hte text with accent color readability --- src/renderer/themes.css | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/renderer/themes.css b/src/renderer/themes.css index e55c02e59..5c7c615a7 100644 --- a/src/renderer/themes.css +++ b/src/renderer/themes.css @@ -810,8 +810,12 @@ it can be safely elided. This looks quite pleasant on this theme. */ --primary-color-active: #ef7a43; } -.mainGruvboxGreen, -.mainGruvboxYellow { +.mainGruvboxDarkGreen, +.mainGruvboxDarkYellow, +.mainGruvboxDarkBlue, +.mainGruvboxDarkAqua, +.mainGruvboxDarkPurple, +.mainGruvboxDarkOrange { --text-with-main-color: #3c3836; } @@ -1539,8 +1543,12 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-opacity3: rgb(214 93 14 / 16%); } -.secGruvboxGreen, -.secGruvboxYellow { +.secGruvboxDarkGreen, +.secGruvboxDarkYellow, +.secGruvboxDarkBlue, +.secGruvboxDarkPurple, +.secGruvboxDarkAqua, +.secGruvboxDarkOrange { --text-with-accent-color: #3c3836; } From 17a1a89fc356cf95d675498292395ab9684eceeb Mon Sep 17 00:00:00 2001 From: DontBlameMe99 <167469818+DontBlameMe99@users.noreply.github.com> Date: Thu, 31 Oct 2024 15:46:53 +0100 Subject: [PATCH 17/18] Improve accent color contrast Improves the accent color contrast to be 4.5 or above --- src/renderer/themes.css | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/src/renderer/themes.css b/src/renderer/themes.css index 5c7c615a7..fb67cf0e1 100644 --- a/src/renderer/themes.css +++ b/src/renderer/themes.css @@ -812,13 +812,16 @@ it can be safely elided. This looks quite pleasant on this theme. */ .mainGruvboxDarkGreen, .mainGruvboxDarkYellow, -.mainGruvboxDarkBlue, .mainGruvboxDarkAqua, -.mainGruvboxDarkPurple, .mainGruvboxDarkOrange { --text-with-main-color: #3c3836; } +.mainGruvboxDarkBlue, +.mainGruvboxDarkPurple { + --text-with-main-color: #1d2021; +} + /*************** SECONDARY THEME COLOR DEFINTIONS ***************/ @@ -1543,7 +1546,6 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-opacity3: rgb(214 93 14 / 16%); } -.secGruvboxDarkGreen, .secGruvboxDarkYellow, .secGruvboxDarkBlue, .secGruvboxDarkPurple, @@ -1552,6 +1554,16 @@ it can be safely elided. This looks quite pleasant on this theme. */ --text-with-accent-color: #3c3836; } +.secGruvboxDarkGreen, +.secGruvboxDarkAqua { + --text-with-accent-color: #1d2021; +} + +.secGruvboxDarkOrange, +.secGruvboxDarkPurple, +.secGruvboxDarkBlue { + --text-with-accent-color: #0d1011; +} /*************** DESTRUCTIVE THEME COLOR OVERRIDES ***************/ From 69de8f236151c469bda2cff8929c36ff99e9b91c Mon Sep 17 00:00:00 2001 From: DontBlameMe99 <167469818+DontBlameMe99@users.noreply.github.com> Date: Fri, 1 Nov 2024 18:53:05 +0100 Subject: [PATCH 18/18] Improve light color contrast & logo visibility - Improves the contrast of the light color scheme colors - Improves the visibility of the logo when the "match top bar with main color" is active --- src/renderer/themes.css | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/renderer/themes.css b/src/renderer/themes.css index fb67cf0e1..c72382a0f 100644 --- a/src/renderer/themes.css +++ b/src/renderer/themes.css @@ -810,16 +810,30 @@ it can be safely elided. This looks quite pleasant on this theme. */ --primary-color-active: #ef7a43; } +.mainGruvboxLightOrange, +.mainGruvboxLightRed, +.mainGruvboxLightBlue, +.mainGruvboxLightPurple { + --text-with-main-color: #fbf1c7; + --logo-icon-bar-color: url('../../_icons/iconGruvboxLightSmall.svg'); + --logo-text-bar-color: url('../../_icons/textGruvboxLightSmall.svg'); +} + + .mainGruvboxDarkGreen, .mainGruvboxDarkYellow, .mainGruvboxDarkAqua, .mainGruvboxDarkOrange { --text-with-main-color: #3c3836; + --logo-icon-bar-color: url('../../_icons/iconGruvboxDarkSmall.svg'); + --logo-text-bar-color: url('../../_icons/textGruvboxDarkSmall.svg'); } .mainGruvboxDarkBlue, .mainGruvboxDarkPurple { --text-with-main-color: #1d2021; + --logo-icon-bar-color: url('../../_icons/iconGruvboxDarkSmall.svg'); + --logo-text-bar-color: url('../../_icons/textGruvboxDarkSmall.svg'); } @@ -1503,6 +1517,7 @@ it can be safely elided. This looks quite pleasant on this theme. */ } .secGruvboxLightRed { + --text-with-accent-color: #fbf1c7; --accent-color: #cc241d; --accent-color-hover: #d23c2a; --accent-color-active: #a61f1f; @@ -1561,7 +1576,10 @@ it can be safely elided. This looks quite pleasant on this theme. */ .secGruvboxDarkOrange, .secGruvboxDarkPurple, -.secGruvboxDarkBlue { +.secGruvboxDarkBlue, +.secGruvboxLightOrange, +.secGruvboxLightBlue, +.secGruvboxLightPurple { --text-with-accent-color: #0d1011; }