Add: Gruvbox color schemes & accent colors (#5887)

* 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)

* Keep A-Z sorted

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

* Keep theme-settings.js sorted

Keeps the file sorted from A-Z

* Keep colors.js sorted

Keeps the file sorted from A-Z

* Add missing commas

Adds two missing commas, which because of the
sorting from A-Z

* Keep sorting in en-US.yaml from A-Z

Keeps the A-Z sorting in the en-US.yaml file

* Delete duplicate line

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

* 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>

* Remove unintentional formatting

Removes the unintentional formatting, automatically done by my nvim lsp.
This adds the blank space back in.

* Fix gruvbox light video feed/status bar divider

Fixes/Improves the color clarity between the status bar and the feed
(the divider).

* Fix: Profile menu no longer blends in with Background

Fixes so that the profile menu no longer blends in with the background

* 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"

* Remove colors with insufficient contrast

Removes the colors which have insuficcient contrast:
- Dark Red
- Light Green
- Light Yellow
- Light Aqua

* Remove unused translations

* Remove unused css colors

Removes unused css for colors:
- Gruvbox Dark Red
- Gruvbox Light Green
- Gruvbox Light Yellow
- Gruvbox Light Aqua

* Improve text with accent readability

Improves hte text with accent color readability

* Improve accent color contrast

Improves the accent color contrast to be 4.5 or above

* 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

* fix: unify main and sec sections

Unifies the main and the secondary color accents,
so both use/modify the same colors, instead of them
(previously) using different colors.
This makes the theme more predictable and modifyable.

* fix: add missing opacity4 color

Adds a missing color for all the gruvbox light secondary accent colors: the opacity4 accent color.

---------

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

src/main/index.js

@@ -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'

src/renderer/components/theme-settings/theme-settings.js

@@ -45,6 +45,8 @@ export default defineComponent({
         // Third group
         'catppuccinMocha',
         'dracula',
+        'gruvboxDark',
+        'gruvboxLight',
         'solarizedDark',
         'solarizedLight'
       ]
@@ -117,6 +119,8 @@ 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.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')
       ]

src/renderer/helpers/colors.js

@@ -39,6 +39,16 @@ export const colors = [
   { name: 'DraculaPurple', value: '#BD93F9' },
   { name: 'DraculaRed', value: '#FF5555' },
   { name: 'DraculaYellow', value: '#F1FA8C' },
+  { 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: 'GruvboxLightBlue', value: '#076678' },
+  { name: 'GruvboxLightPurple', value: '#8f3f71' },
+  { name: 'GruvboxLightOrange', value: '#af3a03' },
   { name: 'SolarizedYellow', value: '#b58900' },
   { name: 'SolarizedOrange', value: '#cb4b16' },
   { name: 'SolarizedRed', value: '#dc322f' },
@@ -88,6 +98,16 @@ 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 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 Blue'),
+    i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Light Purple'),
+    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'),