Add Catppuccin Frappe color theme (#6445)

* feat: add catppuccin frappe color theme Adds the catppuccin frappe color theme * refactor: move frappe above mocha Moves the frappe variant above the mocha variant * fix: move from mochalight icon to frappelight Moves from the mocha light icon to the frappe light icon. --------- Co-authored-by: DontBlameMe <[email protected]>
FreeTubeApp · Dec 28, 2024 · 550ce77 · 550ce77
1 parent ec58931
commit 550ce77
Show file tree

Hide file tree

Showing 10 changed files with 371 additions and 1 deletion.
diff --git a/_icons/iconCatppuccinFrappeDarkSmall.svg b/_icons/iconCatppuccinFrappeDarkSmall.svg
diff --git a/_icons/iconCatppuccinFrappeLightSmall.svg b/_icons/iconCatppuccinFrappeLightSmall.svg
diff --git a/_icons/textCatppuccinFrappeDarkSmall.svg b/_icons/textCatppuccinFrappeDarkSmall.svg
diff --git a/_icons/textCatppuccinFrappeLightSmall.svg b/_icons/textCatppuccinFrappeLightSmall.svg
diff --git 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
@@ -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
@@ -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
@@ -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' },