diff --git a/_icons/iconGruvboxDarkSmall.svg b/_icons/iconGruvboxDarkSmall.svg
new file mode 100644
index 0000000000000..e0223807047ce
--- /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 0000000000000..8750e7bb31c0e
--- /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 0000000000000..00ece3081910a
--- /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 0000000000000..266390e3ad010
--- /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 3e671abccaf58..3f6a016484680 100644
--- a/src/main/index.js
+++ b/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'
diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js
index fc018ab45bcb4..bff594bfcbd45 100644
--- a/src/renderer/components/theme-settings/theme-settings.js
+++ b/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')
]
diff --git a/src/renderer/helpers/colors.js b/src/renderer/helpers/colors.js
index cd1e1d4aebc1f..1b46fb6cefc93 100644
--- a/src/renderer/helpers/colors.js
+++ b/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'),
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index 1f1cdd4ad7961..a977cbc8510c5 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -89,7 +89,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 {
@@ -357,6 +358,45 @@ 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: #282828;
+ --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-shadow-color: rgb(255 241 199 / 100%);
+ --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: #fbf1c7;
+ --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 ***************/
@@ -714,6 +754,92 @@ it can be safely elided. This looks quite pleasant on this theme. */
--primary-color-active: #c5d940;
}
+.mainGruvboxDarkGreen {
+ --primary-color: #b8bb26;
+ --primary-color-hover: #d8db46;
+ --primary-color-active: #f8fb66;
+}
+
+.mainGruvboxDarkYellow {
+ --primary-color: #fabd2f;
+ --primary-color-hover: #fcd54f;
+ --primary-color-active: #fed76f;
+}
+
+.mainGruvboxDarkBlue {
+ --primary-color: #83a598;
+ --primary-color-hover: #a3c5b8;
+ --primary-color-active: #c3e2d8;
+}
+
+.mainGruvboxDarkPurple {
+ --primary-color: #d3869b;
+ --primary-color-hover: #f3a6b8;
+ --primary-color-active: #f3a6b8;
+}
+
+.mainGruvboxDarkAqua {
+ --primary-color: #8ec07c;
+ --primary-color-hover: #aec29c;
+ --primary-color-active: #cec59c;
+}
+
+.mainGruvboxDarkOrange {
+ --primary-color: #fe8019;
+ --primary-color-hover: #fe9a39;
+ --primary-color-active: #feb259;
+}
+
+.mainGruvboxLightRed {
+ --primary-color: #9d0006;
+ --primary-color-hover: #bd2026;
+ --primary-color-active: #dd4046;
+}
+
+.mainGruvboxLightBlue {
+ --primary-color: #076678;
+ --primary-color-hover: #276898;
+ --primary-color-active: #476ab8;
+}
+
+.mainGruvboxLightPurple {
+ --primary-color: #8f3f71;
+ --primary-color-hover: #af5f91;
+ --primary-color-active: #cf7fb1;
+}
+
+.mainGruvboxLightOrange {
+ --primary-color: #af3a03;
+ --primary-color-hover: #cf5a23;
+ --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');
+}
+
/*************** SECONDARY THEME COLOR DEFINTIONS ***************/
@@ -1322,6 +1448,146 @@ it can be safely elided. This looks quite pleasant on this theme. */
--accent-color-opacity4: rgb(101 119 0 / 24%);
}
+.secGruvboxDarkGreen {
+ --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%);
+}
+
+.secGruvboxDarkYellow {
+ --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%);
+}
+
+.secGruvboxDarkBlue {
+ --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%);
+}
+
+.secGruvboxDarkPurple {
+ --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%);
+}
+
+.secGruvboxDarkAqua {
+ --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%);
+}
+
+.secGruvboxDarkOrange {
+ --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%);
+}
+
+.secGruvboxLightRed {
+ --text-with-accent-color: #fbf1c7;
+ --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%);
+}
+
+.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%);
+ --accent-color-opacity4: rgb(69 133 136 / 24%);
+}
+
+.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%);
+ --accent-color-opacity4: rgb(177 98 134 / 24%);
+}
+
+.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%);
+ --accent-color-opacity4: rgb(214 93 14 / 24%);
+}
+
+.secGruvboxLightOrange,
+.secGruvboxLightRed,
+.secGruvboxLightBlue,
+.secGruvboxLightPurple {
+ --text-with-accent-color: #fbf1c7;
+}
+
+.secGruvboxDarkGreen,
+.secGruvboxDarkYellow,
+.secGruvboxDarkAqua,
+.secGruvboxDarkOrange {
+ --text-with-accent-color: #3c3836;
+}
+
+.secGruvboxDarkBlue,
+.secGruvboxDarkPurple {
+ --text-with-accent-color: #1d2021;
+}
+
/*************** DESTRUCTIVE THEME COLOR OVERRIDES ***************/
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index eed3e3c8d6fd0..96e5703a891c9 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -342,6 +342,8 @@ Settings:
Pastel Pink: Pastel Pink
Hot Pink: Hot Pink
Nordic: Nordic
+ Gruvbox Dark: Gruvbox Dark
+ Gruvbox Light: Gruvbox Light
Solarized Dark: Solarized Dark
Solarized Light: Solarized Light
Main Color Theme:
@@ -383,6 +385,16 @@ Settings:
Catppuccin Mocha Sapphire: Catppuccin Mocha Sapphire
Catppuccin Mocha Blue: Catppuccin Mocha Blue
Catppuccin Mocha Lavender: Catppuccin Mocha Lavender
+ 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 Blue: Gruvbox Light Blue
+ Gruvbox Light Purple: Gruvbox Light Purple
+ Gruvbox Light Orange: Gruvbox Light Orange
Solarized Yellow: Solarized Yellow
Solarized Orange: Solarized Orange
Solarized Red: Solarized Red