diff --git a/_icons/iconCatppuccinFrappeDarkSmall.svg b/_icons/iconCatppuccinFrappeDarkSmall.svg
new file mode 100644
index 0000000000000..4690f0aa65846
--- /dev/null
+++ b/_icons/iconCatppuccinFrappeDarkSmall.svg
@@ -0,0 +1,4 @@
+
+
\ No newline at end of file
diff --git a/_icons/iconCatppuccinFrappeLightSmall.svg b/_icons/iconCatppuccinFrappeLightSmall.svg
new file mode 100644
index 0000000000000..f4bebf230f3be
--- /dev/null
+++ b/_icons/iconCatppuccinFrappeLightSmall.svg
@@ -0,0 +1,4 @@
+
+
\ No newline at end of file
diff --git a/_icons/textCatppuccinFrappeDarkSmall.svg b/_icons/textCatppuccinFrappeDarkSmall.svg
new file mode 100644
index 0000000000000..6652db99cbd0f
--- /dev/null
+++ b/_icons/textCatppuccinFrappeDarkSmall.svg
@@ -0,0 +1,4 @@
+
+
\ No newline at end of file
diff --git a/_icons/textCatppuccinFrappeLightSmall.svg b/_icons/textCatppuccinFrappeLightSmall.svg
new file mode 100644
index 0000000000000..1e74e424645cb
--- /dev/null
+++ b/_icons/textCatppuccinFrappeLightSmall.svg
@@ -0,0 +1,4 @@
+
+
\ No newline at end of file
diff --git a/src/main/index.js b/src/main/index.js
index 739ff9ee78f47..d361bf19dfa98 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -655,6 +655,8 @@ function runApp() {
return '#282828'
case 'gruvbox-light':
return '#fbf1c7'
+ case 'catppuccin-frappe':
+ return '#303446'
case 'system':
default:
return nativeTheme.shouldUseDarkColors ? '#212121' : '#f1f1f1'
diff --git a/src/renderer/components/ThemeSettings.vue b/src/renderer/components/ThemeSettings.vue
index 9815a2b0a4f23..b516550d701b8 100644
--- a/src/renderer/components/ThemeSettings.vue
+++ b/src/renderer/components/ThemeSettings.vue
@@ -126,6 +126,7 @@ const BASE_THEME_VALUES = [
'hotPink',
'pastelPink',
// Third group
+ 'catppuccinFrappe',
'catppuccinMocha',
'dracula',
'gruvboxDark',
@@ -145,6 +146,7 @@ const baseThemeNames = computed(() => [
t('Settings.Theme Settings.Base Theme.Hot Pink'),
t('Settings.Theme Settings.Base Theme.Pastel Pink'),
// Third group
+ t('Settings.Theme Settings.Base Theme.Catppuccin Frappe'),
t('Settings.Theme Settings.Base Theme.Catppuccin Mocha'),
t('Settings.Theme Settings.Base Theme.Dracula'),
t('Settings.Theme Settings.Base Theme.Gruvbox Dark'),
diff --git a/src/renderer/composables/colors.js b/src/renderer/composables/colors.js
index aad2b43511b9c..d0af799c56bfa 100644
--- a/src/renderer/composables/colors.js
+++ b/src/renderer/composables/colors.js
@@ -21,6 +21,20 @@ export function useColorTranslations() {
t('Settings.Theme Settings.Main Color Theme.Amber'),
t('Settings.Theme Settings.Main Color Theme.Orange'),
t('Settings.Theme Settings.Main Color Theme.Deep Orange'),
+ t('Settings.Theme Settings.Main Color Theme.Catppuccin Frappe Rosewater'),
+ t('Settings.Theme Settings.Main Color Theme.Catppuccin Frappe Flamingo'),
+ t('Settings.Theme Settings.Main Color Theme.Catppuccin Frappe Pink'),
+ t('Settings.Theme Settings.Main Color Theme.Catppuccin Frappe Mauve'),
+ t('Settings.Theme Settings.Main Color Theme.Catppuccin Frappe Red'),
+ t('Settings.Theme Settings.Main Color Theme.Catppuccin Frappe Maroon'),
+ t('Settings.Theme Settings.Main Color Theme.Catppuccin Frappe Peach'),
+ t('Settings.Theme Settings.Main Color Theme.Catppuccin Frappe Yellow'),
+ t('Settings.Theme Settings.Main Color Theme.Catppuccin Frappe Green'),
+ t('Settings.Theme Settings.Main Color Theme.Catppuccin Frappe Teal'),
+ t('Settings.Theme Settings.Main Color Theme.Catppuccin Frappe Sky'),
+ t('Settings.Theme Settings.Main Color Theme.Catppuccin Frappe Sapphire'),
+ t('Settings.Theme Settings.Main Color Theme.Catppuccin Frappe Blue'),
+ t('Settings.Theme Settings.Main Color Theme.Catppuccin Frappe Lavender'),
t('Settings.Theme Settings.Main Color Theme.Catppuccin Mocha Rosewater'),
t('Settings.Theme Settings.Main Color Theme.Catppuccin Mocha Flamingo'),
t('Settings.Theme Settings.Main Color Theme.Catppuccin Mocha Pink'),
diff --git a/src/renderer/helpers/colors.js b/src/renderer/helpers/colors.js
index c98bc7856de7d..5879a65d7c10e 100644
--- a/src/renderer/helpers/colors.js
+++ b/src/renderer/helpers/colors.js
@@ -19,6 +19,20 @@ export const colors = [
{ name: 'Amber', value: '#FFAB00' },
{ name: 'Orange', value: '#FF6D00' },
{ name: 'DeepOrange', value: '#DD2C00' },
+ { name: 'CatppuccinFrappeRosewater', value: '#f2d5cf' },
+ { name: 'CatppuccinFrappeFlamingo', value: '#eebebe' },
+ { name: 'CatppuccinFrappePink', value: '#f4b8e4' },
+ { name: 'CatppuccinFrappeMauve', value: '#ca9ee6' },
+ { name: 'CatppuccinFrappeRed', value: '#e78284' },
+ { name: 'CatppuccinFrappeMaroon', value: '#ea999c' },
+ { name: 'CatppuccinFrappePeach', value: '#ef9f76' },
+ { name: 'CatppuccinFrappeYellow', value: '#e5c890' },
+ { name: 'CatppuccinFrappeGreen', value: '#a6d189' },
+ { name: 'CatppuccinFrappeTeal', value: '#81c8be' },
+ { name: 'CatppuccinFrappeSky', value: '#99d1db' },
+ { name: 'CatppuccinFrappeSapphire', value: '#85c1dc' },
+ { name: 'CatppuccinFrappeBlue', value: '#8caaee' },
+ { name: 'CatppuccinFrappeLavender', value: '#babbf1' },
{ name: 'CatppuccinMochaRosewater', value: '#F5E0DC' },
{ name: 'CatppuccinMochaFlamingo', value: '#F2CDCD' },
{ name: 'CatppuccinMochaPink', value: '#F5C2E7' },
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index a977cbc8510c5..2b8426dee8358 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -90,7 +90,8 @@ it can be safely elided. This looks quite pleasant on this theme. */
.hotPink,
.nordic,
.solarizedDark,
-.gruvboxDark {
+.gruvboxDark,
+.catppuccinFrappe {
--primary-shadow-color: rgb(0 0 0 / 75%);
.invidiousLogo {
@@ -397,6 +398,25 @@ it can be safely elided. This looks quite pleasant on this theme. */
--logo-text: url('../../_icons/textGruvboxDarkSmall.svg');
}
+.catppuccinFrappe {
+ --primary-text-color: #c6d0f5;
+ --secondary-text-color: #c6d0f5;
+ --tertiary-text-color: #a5adce;
+ --title-color: var(--accent-color);
+ --bg-color: #303446;
+ --favorite-icon-color: #0f0;
+ --card-bg-color: #292c3c;
+ --secondary-card-bg-color: #303446;
+ --scrollbar-color: #414559;
+ --scrollbar-color-hover: #515569;
+ --side-nav-color: #292c3c;
+ --side-nav-hover-color: #232634;
+ --side-nav-active-color: #232634;
+ --search-bar-color: #414559;
+ --logo-icon: url('../../_icons/iconCatppuccinFrappeLightSmall.svg');
+ --logo-text: url('../../_icons/textCatppuccinFrappeLightSmall.svg');
+}
+
/*************** PRIMARY THEME COLOR DEFINTIONS ***************/
@@ -841,6 +861,109 @@ it can be safely elided. This looks quite pleasant on this theme. */
}
+.mainCatppuccinFrappeRosewater,
+.mainCatppuccinFrappeFlamingo,
+.mainCatppuccinFrappePink,
+.mainCatppuccinFrappeMauve,
+.mainCatppuccinFrappeRed,
+.mainCatppuccinFrappeMaroon,
+.mainCatppuccinFrappePeach,
+.mainCatppuccinFrappeYellow,
+.mainCatppuccinFrappeGreen,
+.mainCatppuccinFrappeTeal,
+.mainCatppuccinFrappeSky,
+.mainCatppuccinFrappeSapphire,
+.mainCatppuccinFrappeBlue,
+.mainCatppuccinFrappeLavender {
+ --text-with-main-color: #24273a;
+ --logo-icon-bar-color: url('../../_icons/iconCatppuccinFrappeDarkSmall.svg');
+ --logo-text-bar-color: url('../../_icons/textCatppuccinFrappeDarkSmall.svg');
+}
+
+.mainCatppuccinFrappeRosewater {
+ --primary-color: #f2d5cf;
+ --primary-color-hover: #f2e7e3;
+ --primary-color-active: #e0bfb9;
+}
+
+.mainCatppuccinFrappeFlamingo {
+ --primary-color: #eebebe;
+ --primary-color-hover: #f0d0d0;
+ --primary-color-active: #d8a0a0;
+}
+
+.mainCatppuccinFrappePink {
+ --primary-color: #f4b8e4;
+ --primary-color-hover: #f3c8e7;
+ --primary-color-active: #e19abf;
+}
+
+.mainCatppuccinFrappeMauve {
+ --primary-color: #ca9ee6;
+ --primary-color-hover: #d4b0e7;
+ --primary-color-active: #b37ac9;
+}
+
+.mainCatppuccinFrappeRed {
+ --primary-color: #e78284;
+ --primary-color-hover: #e99a9c;
+ --primary-color-active: #d46b6d;
+}
+
+.mainCatppuccinFrappeMaroon {
+ --primary-color: #ea999c;
+ --primary-color-hover: #eab4b8;
+ --primary-color-active: #d87c80;
+}
+
+.mainCatppuccinFrappePeach {
+ --primary-color: #ef9f76;
+ --primary-color-hover: #f7c0a0;
+ --primary-color-active: #e18b5e;
+}
+
+.mainCatppuccinFrappeYellow {
+ --primary-color: #e5c890;
+ --primary-color-hover: #f0e9c0;
+ --primary-color-active: #d8b790;
+}
+
+.mainCatppuccinFrappeGreen {
+ --primary-color: #a6d189;
+ --primary-color-hover: #bfe9b1;
+ --primary-color-active: #86c77b;
+}
+
+.mainCatppuccinFrappeTeal {
+ --primary-color: #81c8be;
+ --primary-color-hover: #a3d4cc;
+ --primary-color-active: #6fa9a0;
+}
+
+.mainCatppuccinFrappeSky {
+ --primary-color: #99d1db;
+ --primary-color-hover: #b3dce4;
+ --primary-color-active: #6fa9a0;
+}
+
+.mainCatppuccinFrappeSapphire {
+ --primary-color: #85c1dc;
+ --primary-color-hover: #a3d0e4;
+ --primary-color-active: #5a9ec6;
+}
+
+.mainCatppuccinFrappeBlue {
+ --primary-color: #8caaee;
+ --primary-color-hover: #9eb7f0;
+ --primary-color-active: #6c8dbf;
+}
+
+.mainCatppuccinFrappeLavender {
+ --primary-color: #babbf1;
+ --primary-color-hover: #c9c9f3;
+ --primary-color-active: #8a8abf;
+}
+
/*************** SECONDARY THEME COLOR DEFINTIONS ***************/
/* dark secondary theme colors */
@@ -1588,6 +1711,190 @@ it can be safely elided. This looks quite pleasant on this theme. */
--text-with-accent-color: #1d2021;
}
+.secCatppuccinFrappeRosewater,
+.secCatppuccinFrappeFlamingo,
+.secCatppuccinFrappePink,
+.secCatppuccinFrappeMauve,
+.secCatppuccinFrappeRed,
+.secCatppuccinFrappeMaroon,
+.secCatppuccinFrappePeach,
+.secCatppuccinFrappeYellow,
+.secCatppuccinFrappeGreen,
+.secCatppuccinFrappeTeal,
+.secCatppuccinFrappeSky,
+.secCatppuccinFrappeSapphire,
+.secCatppuccinFrappeBlue,
+.secCatppuccinFrappeLavender {
+ --text-with-accent-color: #24273a;
+}
+
+.secCatppuccinFrappeRosewater {
+ --accent-color: #f3d6df;
+ --accent-color-hover: #f3e0e8;
+ --accent-color-active: #e0bfcf;
+ --accent-color-light: #f8e9f2;
+ --accent-color-visited: #d3a1b3;
+ --accent-color-opacity1: rgb(243 214 223 / 4%);
+ --accent-color-opacity2: rgb(243 214 223 / 12%);
+ --accent-color-opacity3: rgb(243 214 223 / 16%);
+ --accent-color-opacity4: rgb(243 214 223 / 24%);
+}
+
+.secCatppuccinFrappeFlamingo {
+ --accent-color: #efbfbf;
+ --accent-color-hover: #f0c9c9;
+ --accent-color-active: #dca8a8;
+ --accent-color-light: #f7dada;
+ --accent-color-visited: #cf8f8f;
+ --accent-color-opacity1: rgb(239 191 191 / 4%);
+ --accent-color-opacity2: rgb(239 191 191 / 12%);
+ --accent-color-opacity3: rgb(239 191 191 / 16%);
+ --accent-color-opacity4: rgb(239 191 191 / 24%);
+}
+
+.secCatppuccinFrappePink {
+ --accent-color: #f5b9e5;
+ --accent-color-hover: #f5c5e9;
+ --accent-color-active: #e0a0d0;
+ --accent-color-light: #f8d4f0;
+ --accent-color-visited: #d38cb7;
+ --accent-color-opacity1: rgb(245 185 229 / 4%);
+ --accent-color-opacity2: rgb(245 185 229 / 12%);
+ --accent-color-opacity3: rgb(245 185 229 / 16%);
+ --accent-color-opacity4: rgb(245 185 229 / 24%);
+}
+
+.secCatppuccinFrappeMauve {
+ --accent-color: #cb9fe7;
+ --accent-color-hover: #d4b0e8;
+ --accent-color-active: #b38fdf;
+ --accent-color-light: #d6b9f9;
+ --accent-color-visited: #a171da;
+ --accent-color-opacity1: rgb(203 159 231 / 4%);
+ --accent-color-opacity2: rgb(203 159 231 / 12%);
+ --accent-color-opacity3: rgb(203 159 231 / 16%);
+ --accent-color-opacity4: rgb(203 159 231 / 24%);
+}
+
+.secCatppuccinFrappeRed {
+ --accent-color: #e88385;
+ --accent-color-hover: #f08b8d;
+ --accent-color-active: #d86f71;
+ --accent-color-light: #f7a0a2;
+ --accent-color-visited: #d86f71;
+ --accent-color-opacity1: rgb(232 131 133 / 4%);
+ --accent-color-opacity2: rgb(232 131 133 / 12%);
+ --accent-color-opacity3: rgb(232 131 133 / 16%);
+ --accent-color-opacity4: rgb(232 131 133 / 24%);
+}
+
+.secCatppuccinFrappeMaroon {
+ --accent-color: #eb9a9d;
+ --accent-color-hover: #f0a1a4;
+ --accent-color-active: #d88b8e;
+ --accent-color-light: #f7b0b3;
+ --accent-color-visited: #d88b8e;
+ --accent-color-opacity1: rgb(235 154 157 / 4%);
+ --accent-color-opacity2: rgb(235 154 157 / 12%);
+ --accent-color-opacity3: rgb(235 154 157 / 16%);
+ --accent-color-opacity4: rgb(235 154 157 / 24%);
+}
+
+.secCatppuccinFrappePeach {
+ --accent-color: #ffaf77;
+ --accent-color-hover: #ffbb8a;
+ --accent-color-active: #e69e6b;
+ --accent-color-light: #fc9;
+ --accent-color-visited: #e69e6b;
+ --accent-color-opacity1: rgb(255 175 119 / 4%);
+ --accent-color-opacity2: rgb(255 175 119 / 12%);
+ --accent-color-opacity3: rgb(255 175 119 / 16%);
+ --accent-color-opacity4: rgb(255 175 119 / 24%);
+}
+
+.secCatppuccinFrappeYellow {
+ --accent-color: #e6c991;
+ --accent-color-hover: #f0d8a1;
+ --accent-color-active: #d8b07f;
+ --accent-color-light: #f7e2b0;
+ --accent-color-visited: #d8b07f;
+ --accent-color-opacity1: rgb(230 201 145 / 4%);
+ --accent-color-opacity2: rgb(230 201 145 / 12%);
+ --accent-color-opacity3: rgb(230 201 145 / 16%);
+ --accent-color-opacity4: rgb(230 201 145 / 24%);
+}
+
+.secCatppuccinFrappeGreen {
+ --accent-color: #a7d28a;
+ --accent-color-hover: #b7d28f;
+ --accent-color-active: #87b96f;
+ --accent-color-light: #bde6a0;
+ --accent-color-visited: #6fc75f;
+ --accent-color-opacity1: rgb(167 210 138 / 4%);
+ --accent-color-opacity2: rgb(167 210 138 / 12%);
+ --accent-color-opacity3: rgb(167 210 138 / 16%);
+ --accent-color-opacity4: rgb(167 210 138 / 24%);
+}
+
+.secCatppuccinFrappeTeal {
+ --accent-color: #82c9bf;
+ --accent-color-hover: #92d0c6;
+ --accent-color-active: #6eb5ab;
+ --accent-color-light: #a0d6ce;
+ --accent-color-visited: #6eb5ab;
+ --accent-color-opacity1: rgb(130 201 191 / 4%);
+ --accent-color-opacity2: rgb(130 201 191 / 12%);
+ --accent-color-opacity3: rgb(130 201 191 / 16%);
+ --accent-color-opacity4: rgb(130 201 191 / 24%);
+}
+
+.secCatppuccinFrappeSky {
+ --accent-color: #9ad2dc;
+ --accent-color-hover: #a9d7e0;
+ --accent-color-active: #7dbecb;
+ --accent-color-light: #b4e6f0;
+ --accent-color-visited: #6aaed0;
+ --accent-color-opacity1: rgb(154 210 220 / 4%);
+ --accent-color-opacity2: rgb(154 210 220 / 12%);
+ --accent-color-opacity3: rgb(154 210 220 / 16%);
+ --accent-color-opacity4: rgb(154 210 220 / 24%);
+}
+
+.secCatppuccinFrappeSapphire {
+ --accent-color: #86c2dd;
+ --accent-color-hover: #96c9e1;
+ --accent-color-active: #6aaed0;
+ --accent-color-light: #a0d4e6;
+ --accent-color-visited: #6aaed0;
+ --accent-color-opacity1: rgb(134 194 221 / 4%);
+ --accent-color-opacity2: rgb(134 194 221 / 12%);
+ --accent-color-opacity3: rgb(134 194 221 / 16%);
+ --accent-color-opacity4: rgb(134 194 221 / 24%);
+}
+
+.secCatppuccinFrappeBlue {
+ --accent-color: #8dabef;
+ --accent-color-hover: #9dbbef;
+ --accent-color-active: #6b8fcf;
+ --accent-color-light: #a7c1f4;
+ --accent-color-visited: #6b8fcf;
+ --accent-color-opacity1: rgb(141 171 239 / 4%);
+ --accent-color-opacity2: rgb(141 171 239 / 12%);
+ --accent-color-opacity3: rgb(141 171 239 / 16%);
+ --accent-color-opacity4: rgb(141 171 239 / 24%);
+}
+
+.secCatppuccinFrappeLavender {
+ --accent-color: #bbbcf2;
+ --accent-color-hover: #c4c5f2;
+ --accent-color-active: #a8a9f2;
+ --accent-color-light: #c7c8f2;
+ --accent-color-visited: #9a9bf2;
+ --accent-color-opacity1: rgb(187 188 242 / 4%);
+ --accent-color-opacity2: rgb(187 188 242 / 12%);
+ --accent-color-opacity3: rgb(187 188 242 / 16%);
+ --accent-color-opacity4: rgb(187 188 242 / 24%);
+}
/*************** DESTRUCTIVE THEME COLOR OVERRIDES ***************/
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 11599e1b60b97..f0758bed23eb9 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -336,6 +336,7 @@ Settings:
System Default: System Default
Light: Light
Dracula: Dracula
+ Catppuccin Frappe: Catppuccin Frappe
Catppuccin Mocha: Catppuccin Mocha
Pastel Pink: Pastel Pink
Hot Pink: Hot Pink
@@ -369,6 +370,20 @@ Settings:
Dracula Purple: Dracula Purple
Dracula Red: Dracula Red
Dracula Yellow: Dracula Yellow
+ Catppuccin Frappe Rosewater: Catppuccin Frappe Rosewater
+ Catppuccin Frappe Flamingo: Catppuccin Frappe Flamingo
+ Catppuccin Frappe Pink: Catppuccin Frappe Pink
+ Catppuccin Frappe Mauve: Catppuccin Frappe Mauve
+ Catppuccin Frappe Red: Catppuccin Frappe Red
+ Catppuccin Frappe Maroon: Catppuccin Frappe Maroon
+ Catppuccin Frappe Peach: Catppuccin Frappe Peach
+ Catppuccin Frappe Yellow: Catppuccin Frappe Yellow
+ Catppuccin Frappe Green: Catppuccin Frappe Green
+ Catppuccin Frappe Teal: Catppuccin Frappe Teal
+ Catppuccin Frappe Sky: Catppuccin Frappe Sky
+ Catppuccin Frappe Sapphire: Catppuccin Frappe Sapphire
+ Catppuccin Frappe Blue: Catppuccin Frappe Blue
+ Catppuccin Frappe Lavender: Catppuccin Frappe Lavender
Catppuccin Mocha Rosewater: Catppuccin Mocha Rosewater
Catppuccin Mocha Flamingo: Catppuccin Mocha Flamingo
Catppuccin Mocha Pink: Catppuccin Mocha Pink