mirror of
https://github.com/FreeTubeApp/FreeTube
synced 2024-11-19 00:17:11 +01:00
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:
parent
530d6c88d1
commit
b9d5778a4d
@ -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')
|
||||
]
|
||||
|
@ -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'),
|
||||
|
Loading…
Reference in New Issue
Block a user