Sorted and grouped themes and colors (#5114)

* Sorted and grouped themes and colors

* Sort themes properly in dropdown

* Add code comment about grouping

* Fix lint

* fix lint again

* lint should be fixed now

* trim whitespace again...

* Add comment for consistency
This commit is contained in:
efb4f5ff-1298-471a-8973-3d47447115dc 2024-05-16 16:43:51 +00:00 committed by GitHub
parent 530d6c88d1
commit b9d5778a4d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 30 additions and 22 deletions

View File

@ -30,16 +30,20 @@ export default defineComponent({
'restart',
'cancel'
],
/* Themes are devided into 3 groups. The first group contains the default themes. The second group are themes that don't have specific primary and secondary colors. The third group are themes that do have specific primary and secondary colors available. */
baseThemeValues: [
// First group
'system',
'light',
'dark',
'black',
'dracula',
'catppuccinMocha',
'pastelPink',
'hotPink',
// Second group
'nordic',
'hotPink',
'pastelPink',
// Third group
'catppuccinMocha',
'dracula',
'solarizedDark',
'solarizedLight'
]
@ -97,17 +101,21 @@ export default defineComponent({
]
},
/* Themes are devided into 3 groups. The first group contains the default themes. The second group are themes that don't have specific primary and secondary colors. The third group are themes that do have specific primary and secondary colors available. */
baseThemeNames: function () {
return [
// First group
this.$t('Settings.Theme Settings.Base Theme.System Default'),
this.$t('Settings.Theme Settings.Base Theme.Light'),
this.$t('Settings.Theme Settings.Base Theme.Dark'),
this.$t('Settings.Theme Settings.Base Theme.Black'),
this.$t('Settings.Theme Settings.Base Theme.Dracula'),
this.$t('Settings.Theme Settings.Base Theme.Catppuccin Mocha'),
this.$t('Settings.Theme Settings.Base Theme.Pastel Pink'),
this.$t('Settings.Theme Settings.Base Theme.Hot Pink'),
// Second group
this.$t('Settings.Theme Settings.Base Theme.Nordic'),
this.$t('Settings.Theme Settings.Base Theme.Hot Pink'),
this.$t('Settings.Theme Settings.Base Theme.Pastel Pink'),
// 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.Solarized Dark'),
this.$t('Settings.Theme Settings.Base Theme.Solarized Light')
]

View File

@ -17,13 +17,6 @@ export const colors = [
{ name: 'Amber', value: '#FFAB00' },
{ name: 'Orange', value: '#FF6D00' },
{ name: 'DeepOrange', value: '#DD2C00' },
{ name: 'DraculaCyan', value: '#8BE9FD' },
{ name: 'DraculaGreen', value: '#50FA7B' },
{ name: 'DraculaOrange', value: '#FFB86C' },
{ name: 'DraculaPink', value: '#FF79C6' },
{ name: 'DraculaPurple', value: '#BD93F9' },
{ name: 'DraculaRed', value: '#FF5555' },
{ name: 'DraculaYellow', value: '#F1FA8C' },
{ name: 'CatppuccinMochaRosewater', value: '#F5E0DC' },
{ name: 'CatppuccinMochaFlamingo', value: '#F2CDCD' },
{ name: 'CatppuccinMochaPink', value: '#F5C2E7' },
@ -38,6 +31,13 @@ export const colors = [
{ name: 'CatppuccinMochaSapphire', value: '#74C7EC' },
{ name: 'CatppuccinMochaBlue', value: '#89B4FA' },
{ name: 'CatppuccinMochaLavender', value: '#B4BEFE' },
{ name: 'DraculaCyan', value: '#8BE9FD' },
{ name: 'DraculaGreen', value: '#50FA7B' },
{ name: 'DraculaOrange', value: '#FFB86C' },
{ name: 'DraculaPink', value: '#FF79C6' },
{ name: 'DraculaPurple', value: '#BD93F9' },
{ name: 'DraculaRed', value: '#FF5555' },
{ name: 'DraculaYellow', value: '#F1FA8C' },
{ name: 'SolarizedYellow', value: '#b58900' },
{ name: 'SolarizedOrange', value: '#cb4b16' },
{ name: 'SolarizedRed', value: '#dc322f' },
@ -66,13 +66,6 @@ export function getColorTranslations() {
i18n.t('Settings.Theme Settings.Main Color Theme.Amber'),
i18n.t('Settings.Theme Settings.Main Color Theme.Orange'),
i18n.t('Settings.Theme Settings.Main Color Theme.Deep Orange'),
i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Cyan'),
i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Green'),
i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Orange'),
i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Pink'),
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.Catppuccin Mocha Rosewater'),
i18n.t('Settings.Theme Settings.Main Color Theme.Catppuccin Mocha Flamingo'),
i18n.t('Settings.Theme Settings.Main Color Theme.Catppuccin Mocha Pink'),
@ -87,6 +80,13 @@ export function getColorTranslations() {
i18n.t('Settings.Theme Settings.Main Color Theme.Catppuccin Mocha Sapphire'),
i18n.t('Settings.Theme Settings.Main Color Theme.Catppuccin Mocha Blue'),
i18n.t('Settings.Theme Settings.Main Color Theme.Catppuccin Mocha Lavender'),
i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Cyan'),
i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Green'),
i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Orange'),
i18n.t('Settings.Theme Settings.Main Color Theme.Dracula Pink'),
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.Solarized Yellow'),
i18n.t('Settings.Theme Settings.Main Color Theme.Solarized Orange'),
i18n.t('Settings.Theme Settings.Main Color Theme.Solarized Red'),