Add gruvbox base theme and gruvbox green color theme

src/main/index.js

@@ -626,6 +626,8 @@ function runApp() {
           return '#de1c85'
         case 'nordic':
           return '#2b2f3a'
+        case 'gruvbox-dark':
+          return '32302f'
         case 'solarized-dark':
           return '#002B36'
         case 'solarized-light':

src/renderer/components/ft-share-button/ft-share-button.scss

@@ -42,6 +42,7 @@
 
     @at-root {
       .dark &,
+      .gruvboxDark &,
       .system[data-system-theme*='dark'] & {
         filter: brightness(0.868);
       }
@@ -79,6 +80,7 @@
         .dracula &,
         .CatppuccinMocha &,
         .hotPink &,
+	.gruvboxDark &,
         .solarizedDark &,
         .system[data-system-theme*='dark'] & {
           background-image: url('../../assets/img/invidious-logo-dark.svg');

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

@@ -44,6 +44,7 @@ export default defineComponent({
         // Third group
         'catppuccinMocha',
         'dracula',
+        'gruvboxDark',
         'solarizedDark',
         'solarizedLight'
       ]
@@ -116,6 +117,7 @@ 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.Solarized Dark'),
         this.$t('Settings.Theme Settings.Base Theme.Solarized Light')
       ]

src/renderer/helpers/colors.js

@@ -31,6 +31,13 @@ export const colors = [
   { name: 'CatppuccinMochaSapphire', value: '#74C7EC' },
   { name: 'CatppuccinMochaBlue', value: '#89B4FA' },
   { name: 'CatppuccinMochaLavender', value: '#B4BEFE' },
+  { name: 'GruvboxGreen', value: '#b8bb26' },
+  { name: 'GruvboxRed', value: 'fb4934' },
+  { name: 'GruvboxYellow', value: '#fabd2f' },
+  { name: 'GruvboxBlue', value: '#83a598' },
+  { name: 'GruvboxPurple', value: '#d3869b' },
+  { name: 'GruvboxAqua', value: '#8ec07c' },
+  { name: 'GruvboxOrange', value: '#fe8019' },
   { name: 'DraculaCyan', value: '#8BE9FD' },
   { name: 'DraculaGreen', value: '#50FA7B' },
   { name: 'DraculaOrange', value: '#FFB86C' },
@@ -87,6 +94,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 Green'),
+    i18n.t('Settings.Theme Settings.Main Color Theme.Gruvbox Red'),
+    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'),

src/renderer/themes.css

@@ -7,6 +7,7 @@
 .pastelPink,
 .hotPink,
 .nordic,
+.gruvboxDark,
 .solarizedDark,
 .solarizedLight {
   --primary-input-color: rgb(0 0 0 / 50%);
@@ -32,6 +33,7 @@
 .pastelPink,
 .hotPink,
 .nordic,
+.gruvboxDark,
 .solarizedDark,
 .solarizedLight {
   --link-color: var(--accent-color);
@@ -47,6 +49,7 @@
 .catppuccinMocha,
 .pastelPink,
 .nordic,
+.gruvboxDark,
 .solarizedDark,
 .solarizedLight {
   --primary-input-color: rgb(0 0 0 / 50%);
@@ -60,6 +63,7 @@
 .dracula,
 .catppuccinMocha,
 .nordic,
+.gruvboxDark,
 .solarizedDark,
 .solarizedLight {
   --side-nav-active-text-color: var(--primary-text-color);
@@ -82,6 +86,7 @@
 .catppuccinMocha,
 .hotPink,
 .nordic,
+.gruvboxDark,
 .solarizedDark,
 .solarizedLight {
   --primary-shadow-color: rgb(0 0 0 / 75%);
@@ -322,6 +327,25 @@ 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: #fbf1c7;
+  --tertiary-text-color: #ebdbb2;
+  --title-color: #ebdbb2;
+  --bg-color: #32302f;
+  --favorite-icon-color: #fabd2f;
+  --card-bg-color: #1d2021;
+  --secondary-card-bg-color: #458588;
+  --scrollbar-color: #ebdbb2;
+  --scrollbar-color-hover: #504945;
+  --side-nav-color: #282828;
+  --side-nav-hover-color: #3c3836;
+  --side-nav-active-color: #3c3836;
+  --search-bar-color: #504945;
+  --logo-icon: url("../../_icons/iconGruvboxLightSmall.svg");
+  --logo-text: url("../../_icons/textGruvboxLightSmall.svg");
+}
+
 .mainRed,
 .mainPink,
 .mainPurple,
@@ -444,6 +468,61 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --primary-color-active: #D84315;
 }
 
+.mainGruvboxGreen,
+.mainGruvboxRed,
+.mainGruvboxYellow,
+.mainGruvboxBlue,
+.mainGruvboxPurple,
+.mainGruvboxAqua,
+.mainGruvboxOrange {
+    --text-with-main-color: #1d2021;    
+    --logo-icon-bar-color: url("../../_icons/iconGruvboxLightSmall.svg");                          
+    --logo-text-bar-color: url("../../_icons/textGruvboxLightSmall.svg");
+
+}
+
+.mainGruvboxGreen {
+    --primary-color: #b8bb26;
+    --primary-color-hover: #98971a;
+    --primary-color-active: #79740e;
+}
+
+.mainGruvboxRed {
+    --primary-color: #fb4934;
+    --primary-color-hover: #cc241d;
+    --primary-color-active: #9d0006;
+}
+
+.mainGruvboxYellow {
+    --primary-color: #fabd2f;
+    --primary-color-hover: #d79921;
+    --primary-color-active: #b57614;
+}
+
+.mainGruvboxBlue {
+    --primary-color: #83a598;
+    --primary-color-hover: #458588;
+    --primary-color-active: #076678;
+}
+
+.mainGruvboxPurple {
+    --primary-color: #d3869b;
+    --primary-color-hover: #b16286;
+    --primary-color-active: #8f3f71;
+}
+
+.mainGruvboxAqua {
+    --primary-color: #8ec07c;
+    --primary-color-hover: #689d6a;
+    --primary-color-active: #427b58;
+}
+
+.mainGruvboxOrange {
+    --primary-color: #fe8019;
+    --primary-color-hover: #d65d0e;
+    --primary-color-active: #af3a03;
+}
+
 .mainDraculaCyan,
 .mainDraculaGreen,
 .mainDraculaOrange,
@@ -461,6 +540,8 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --logo-text-bar-color: url("../../_icons/textDraculaLightSmall.svg");
 }
 
+
+
 .mainDraculaCyan {
   --primary-color: #8BE9FD;
   --primary-color-hover: #97EBFD;
@@ -1154,6 +1235,76 @@ it can be safely elided. This looks quite pleasant on this theme. */
   --accent-color-opacity4: rgb(180 190 254 / 24%);
 }
 
+.secGruvboxGreen,
+.secGruvboxRed,
+.secGruvboxYellow,
+.secGruvboxBlue,
+.secGruvboxPurple,
+.secGruvboxAqua,
+.secGruvboxOrange {
+  --text-with-accent-color: #1d2021;
+  --accent-color-opacity1: rgb(102 92 84 / 4%);
+  --accent-color-opacity2: rgb(102 92 84 / 12%);
+  --accent-color-opacity3: rgb(102 92 84 / 16%);
+  --accent-color-opacity4: rgb(102 92 84 / 24%);
+}
+
+.secGruvboxGreen {
+  --accent-color: #b8bb26;
+  --accent-color-hover: #98971a;
+  --accent-color-active: #79740e;
+  --accent-color-light: #c9cd35;
+  --accent-color-visited: #d4d767;
+}
+
+.secGruvboxRed {
+  --accent-color: #fb4934;
+  --accent-color-hover: #cc241d;
+  --accent-color-active: #9d0006;
+  --accent-color-light: #f55441;
+  --accent-color-visited: #fe7d6e;
+}
+
+.secGruvboxYellow {
+  --accent-color: #fabd2f;
+  --accent-color-hover: #d79921;
+  --accent-color-active: #b57614;
+  --accent-color-light: #fec44e;
+  --accent-color-visited: #ffe179;
+}
+
+.secGruvboxBlue {
+  --accent-color: #83a598;
+  --accent-color-hover: #458588;
+  --accent-color-active: #076678;
+  --accent-color-light: #91bfad;
+  --accent-color-visited: #abead2;
+}
+
+.secGruvboxPurple {
+  --accent-color: #d3869b;
+  --accent-color-hover: #b16286;
+  --accent-color-active: #8f3f71;
+  --accent-color-light: #ebabbc;
+  --accent-color-visited: #f3c4d1;
+}
+
+.secGruvboxAqua {
+  --accent-color: #8ec07c;
+  --accent-color-hover: #689d6a;
+  --accent-color-active: #427b58;
+  --accent-color-light: #9dd389;
+  --accent-color-visited: #b7e8a4;
+}
+
+.secGruvboxOrange {
+  --accent-color: #fe8019;
+  --accent-color-hover: #d65d0e;
+  --accent-color-active: #af3a03;
+  --accent-color-light: #f49140;
+  --accent-color-visited: #ffad69;
+}
+
 .secSolarizedYellow,
 .secSolarizedOrange,
 .secSolarizedRed,