diff --git a/_icons/iconCatppuccinLatteDarkSmall.svg b/_icons/iconCatppuccinLatteDarkSmall.svg new file mode 100644 index 0000000000000..77515ac5c2834 --- /dev/null +++ b/_icons/iconCatppuccinLatteDarkSmall.svg @@ -0,0 +1 @@ + diff --git a/_icons/iconCatppuccinLatteLightSmall.svg b/_icons/iconCatppuccinLatteLightSmall.svg new file mode 100644 index 0000000000000..b4f00c9e6a7ce --- /dev/null +++ b/_icons/iconCatppuccinLatteLightSmall.svg @@ -0,0 +1 @@ + diff --git a/_icons/textCatppuccinLatteDarkSmall.svg b/_icons/textCatppuccinLatteDarkSmall.svg new file mode 100644 index 0000000000000..fab65c971dc98 --- /dev/null +++ b/_icons/textCatppuccinLatteDarkSmall.svg @@ -0,0 +1 @@ + diff --git a/_icons/textCatppuccinLatteLightSmall.svg b/_icons/textCatppuccinLatteLightSmall.svg new file mode 100644 index 0000000000000..a7e98bfd03eed --- /dev/null +++ b/_icons/textCatppuccinLatteLightSmall.svg @@ -0,0 +1 @@ + diff --git a/src/main/index.js b/src/main/index.js index e6549a702ddcf..a27b3fab9e666 100644 --- a/src/main/index.js +++ b/src/main/index.js @@ -879,6 +879,8 @@ function runApp() { return '#fdf6e3' case 'everforest-light-low': return '#f3ead3' + case 'catppuccin-latte': + return '#eff1f5' case 'system': default: return nativeTheme.shouldUseDarkColors ? '#212121' : '#f1f1f1' diff --git a/src/renderer/components/ThemeSettings.vue b/src/renderer/components/ThemeSettings.vue index 6857b27eed3bc..7d8a05d2cde55 100644 --- a/src/renderer/components/ThemeSettings.vue +++ b/src/renderer/components/ThemeSettings.vue @@ -128,6 +128,7 @@ const BASE_THEME_VALUES = [ 'pastelPink', // Third group 'catppuccinFrappe', + 'catppuccinLatte', 'catppuccinMocha', 'dracula', 'everforestDarkHard', @@ -154,6 +155,7 @@ const baseThemeNames = computed(() => [ 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 Latte'), t('Settings.Theme Settings.Base Theme.Catppuccin Mocha'), t('Settings.Theme Settings.Base Theme.Dracula'), t('Settings.Theme Settings.Base Theme.Everforest Dark Hard'), diff --git a/src/renderer/composables/colors.js b/src/renderer/composables/colors.js index 32e71a6156653..9e342851c16e4 100644 --- a/src/renderer/composables/colors.js +++ b/src/renderer/composables/colors.js @@ -35,6 +35,8 @@ export function useColorTranslations() { 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 Latte Mauve'), + t('Settings.Theme Settings.Main Color Theme.Catppuccin Latte Red'), 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 1e98eb5140eee..22aa80a529ded 100644 --- a/src/renderer/helpers/colors.js +++ b/src/renderer/helpers/colors.js @@ -33,6 +33,8 @@ export const colors = [ { name: 'CatppuccinFrappeSapphire', value: '#85c1dc' }, { name: 'CatppuccinFrappeBlue', value: '#8caaee' }, { name: 'CatppuccinFrappeLavender', value: '#babbf1' }, + { name: 'CatppuccinLatteMauve', value: '#8839ef' }, + { name: 'CatppuccinLatteRed', value: '#d20f39' }, { 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 f67d5bb3ced25..2cded1e14998b 100644 --- a/src/renderer/themes.css +++ b/src/renderer/themes.css @@ -133,7 +133,8 @@ it can be safely elided. This looks quite pleasant on this theme. */ .everforestLightMedium, .everforestLightLow, .gruvboxLight, -.solarizedLight { +.solarizedLight, +.catppuccinLatte { --primary-shadow-color: rgb(255 255 255 / 75%); } @@ -538,6 +539,25 @@ it can be safely elided. This looks quite pleasant on this theme. */ --logo-text: url('../../_icons/textEverforestDarkLowSmall.svg'); } +.catppuccinLatte { + --primary-text-color: #4c4f69; + --secondary-text-color: #4c4f69; + --tertiary-text-color: #6c6f85; + --title-color: #4c4f69; + --bg-color: #eff1f5; + --favorite-icon-color: #0f0; + --card-bg-color: #e6e9ef; + --secondary-card-bg-color: #eff1f5; + --scrollbar-color: #ccd0da; + --scrollbar-color-hover: #eff1f5; + --side-nav-color: #e6e9ef; + --side-nav-hover-color: #dce0e8; + --side-nav-active-color: #dce0e8; + --search-bar-color: #ccd0da; + --logo-icon: url('../../_icons/iconCatppuccinLatteDarkSmall.svg'); + --logo-text: url('../../_icons/textCatppuccinLatteDarkSmall.svg'); +} + /*************** PRIMARY THEME COLOR DEFINTIONS ***************/ .mainRed, @@ -980,7 +1000,6 @@ it can be safely elided. This looks quite pleasant on this theme. */ --logo-text-bar-color: url('../../_icons/textGruvboxDarkSmall.svg'); } - .mainCatppuccinFrappeRosewater, .mainCatppuccinFrappeFlamingo, .mainCatppuccinFrappePink, @@ -1187,6 +1206,25 @@ it can be safely elided. This looks quite pleasant on this theme. */ --primary-color-active: #a63f9a; } +.mainCatppuccinLatteMauve, +.mainCatppuccinLatteRed { + --text-with-main-color: #fff; + --logo-icon-bar-color: url('../../_icons/iconCatppuccinLatteLightSmall.svg'); + --logo-text-bar-color: url('../../_icons/textCatppuccinLatteLightSmall.svg'); +} + +.mainCatppuccinLatteMauve { + --primary-color: #8839ef; + --primary-color-hover: #9f5cf1; + --primary-color-active: #6c28ce; +} + +.mainCatppuccinLatteRed { + --primary-color: #d20f39; + --primary-color-hover: #dd385c; + --primary-color-active: #a60c2d; +} + /*************** SECONDARY THEME COLOR DEFINTIONS ***************/ /* dark secondary theme colors */ @@ -2000,6 +2038,27 @@ it can be safely elided. This looks quite pleasant on this theme. */ --accent-color-visited: #c84f9a; } +.secCatppuccinLatteMauve, +.secCatppuccinLatteRed { + --text-with-accent-color: #fff; +} + +.secCatppuccinLatteMauve { + --accent-color-rgb: 136 57 239; + --accent-color-hover: #9f5cf1; + --accent-color-active: #7129d2; + --accent-color-light: #b076f8; + --accent-color-visited: #6021a9; +} + +.secCatppuccinLatteRed { + --accent-color-rgb: 210 15 57; + --accent-color-hover: #dd385c; + --accent-color-active: #ad0c2e; + --accent-color-light: #e64e71; + --accent-color-visited: #810922; +} + /*************** DESTRUCTIVE THEME COLOR OVERRIDES ***************/ /* stylelint-disable no-descending-specificity */ diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml index 17b15a12a76de..f2d15ba446492 100644 --- a/static/locales/en-US.yaml +++ b/static/locales/en-US.yaml @@ -335,6 +335,7 @@ Settings: Light: Light Dracula: Dracula Catppuccin Frappe: Catppuccin Frappe + Catppuccin Latte: Catppuccin Latte Catppuccin Mocha: Catppuccin Mocha Pastel Pink: Pastel Pink Hot Pink: Hot Pink @@ -388,6 +389,8 @@ Settings: Catppuccin Frappe Sapphire: Catppuccin Frappe Sapphire Catppuccin Frappe Blue: Catppuccin Frappe Blue Catppuccin Frappe Lavender: Catppuccin Frappe Lavender + Catppuccin Latte Mauve: Catppuccin Latte Mauve + Catppuccin Latte Red: Catppuccin Latte Red Catppuccin Mocha Rosewater: Catppuccin Mocha Rosewater Catppuccin Mocha Flamingo: Catppuccin Mocha Flamingo Catppuccin Mocha Pink: Catppuccin Mocha Pink