+2 -2

src/components/Modals/Settings/AccentModal.vue

··· 1 1 <script lang="ts" setup> 2 2 import { IconCheckRounded } from '@iconify-prerendered/vue-material-symbols' 3 3 4 4 - import { useThemeStore, AccentColours } from '@/stores/theme' 4 4 + import { useThemeStore } from '@/stores/theme' 5 5 import Modal from '@/components/UI/BaseModal.vue' 6 6 import Button from '@/components/UI/BaseButton.vue' 7 7 ··· 12 12 <Modal title="Accent Colour" width="640px"> 13 13 <div class="accent-modal"> 14 14 <button 15 15 - v-for="colour in AccentColours" 15 15 + v-for="colour in themeStore.availableAccents" 16 16 :key="colour" 17 17 class="accent-btn" 18 18 :class="{ active: themeStore.preferredAccent === colour }"

+18 -17

src/components/Modals/Settings/ThemeModal.vue

··· 29 29 :class="{ active: themeStore.preferredLight === t.id }" 30 30 @click="selectTheme(t.id, 'light')" 31 31 :style="{ 32 32 - '--t-base': `hsl(${t.variables.base})`, 33 33 - '--t-mantle': `hsl(${t.variables.mantle})`, 34 34 - '--t-crust': `hsl(${t.variables.crust})`, 35 35 - '--t-overlay': `hsl(${t.variables.overlay})`, 36 36 - '--t-text': `hsl(${t.variables.text})`, 37 37 - '--t-surface': `hsl(${t.variables.surface0})`, 38 38 - '--t-blue': `hsl(${t.variables.blue})`, 39 39 - '--t-pink': `hsl(${t.variables.pink})`, 40 40 - '--t-green': `hsl(${t.variables.green})`, 32 32 + '--t-base': `hsl(${t.ui.base})`, 33 33 + '--t-mantle': `hsl(${t.ui.mantle})`, 34 34 + '--t-crust': `hsl(${t.ui.crust})`, 35 35 + '--t-overlay': `hsl(${t.ui.overlay0})`, 36 36 + '--t-text': `hsl(${t.ui.text})`, 37 37 + '--t-surface': `hsl(${t.ui.surface0})`, 38 38 + '--t-blue': `hsl(${t.accents.blue})`, 39 39 + '--t-pink': `hsl(${t.accents.pink})`, 40 40 + '--t-green': `hsl(${t.accents.green})`, 41 41 }" 42 42 > 43 43 <div class="card-bg"></div> ··· 67 67 :class="{ active: themeStore.preferredDark === t.id }" 68 68 @click="selectTheme(t.id, 'dark')" 69 69 :style="{ 70 70 - '--t-base': `hsl(${t.variables.base})`, 71 71 - '--t-mantle': `hsl(${t.variables.mantle})`, 72 72 - '--t-crust': `hsl(${t.variables.crust})`, 73 73 - '--t-text': `hsl(${t.variables.text})`, 74 74 - '--t-surface': `hsl(${t.variables.surface0})`, 75 75 - '--t-blue': `hsl(${t.variables.blue})`, 76 76 - '--t-pink': `hsl(${t.variables.pink})`, 77 77 - '--t-green': `hsl(${t.variables.green})`, 70 70 + '--t-base': `hsl(${t.ui.base})`, 71 71 + '--t-mantle': `hsl(${t.ui.mantle})`, 72 72 + '--t-crust': `hsl(${t.ui.crust})`, 73 73 + '--t-overlay': `hsl(${t.ui.overlay0})`, 74 74 + '--t-text': `hsl(${t.ui.text})`, 75 75 + '--t-surface': `hsl(${t.ui.surface0})`, 76 76 + '--t-blue': `hsl(${t.accents.blue})`, 77 77 + '--t-pink': `hsl(${t.accents.pink})`, 78 78 + '--t-green': `hsl(${t.accents.green})`, 78 79 }" 79 80 > 80 81 <div class="card-bg"></div>

+29 -176

src/stores/theme.ts

··· 3 3 import { useEnvironmentStore } from './environment' 4 4 5 5 import KEYS from '@/utils/keys' 6 6 - 7 7 - export interface ThemeDefinition { 8 8 - id: string 9 9 - name: string 10 10 - type: 'light' | 'dark' 11 11 - variables: Record<string, string> 12 12 - } 13 13 - 14 14 - const latte: ThemeDefinition = { 15 15 - id: 'latte', 16 16 - name: 'Latte', 17 17 - type: 'light', 18 18 - variables: { 19 19 - rosewater: '10.8 58.824% 66.667%', 20 20 - flamingo: '0 59.763% 66.863%', 21 21 - pink: '316.034 73.418% 69.02%', 22 22 - mauve: '266.044 85.047% 58.039%', 23 23 - red: '347.077 86.667% 44.118%', 24 24 - maroon: '354.783 76.303% 58.627%', 25 25 - peach: '21.975 99.184% 51.961%', 26 26 - yellow: '34.948 76.984% 49.412%', 27 27 - green: '109.231 57.635% 39.804%', 28 28 - teal: '183.231 73.864% 34.51%', 29 29 - sky: '197.067 96.567% 45.686%', 30 30 - sapphire: '188.859 69.953% 41.765%', 31 31 - blue: '219.907 91.489% 53.922%', 32 32 - lavender: '230.935 97.203% 71.961%', 33 33 - text: '233.793 16.022% 35.49%', 34 34 - subtext1: '233.333 12.796% 41.373%', 35 35 - subtext0: '232.8 10.373% 47.255%', 36 36 - overlay2: '232.174 9.623% 53.137%', 37 37 - overlay1: '231.429 10.048% 59.02%', 38 38 - overlay0: '228 11.236% 65.098%', 39 39 - surface2: '226.667 12.162% 70.98%', 40 40 - surface1: '225 13.559% 76.863%', 41 41 - surface0: '222.857 15.909% 82.745%', 42 42 - base: '220 23.077% 94.902%', 43 43 - mantle: '220 21.951% 91.961%', 44 44 - crust: '220 20.69% 88.627%', 45 45 - }, 46 46 - } 47 47 - 48 48 - const frappe: ThemeDefinition = { 49 49 - id: 'frappe', 50 50 - name: 'Frappé', 51 51 - type: 'dark', 52 52 - variables: { 53 53 - rosewater: '10.286 57.377% 88.039%', 54 54 - flamingo: '0 58.537% 83.922%', 55 55 - pink: '316 73.171% 83.922%', 56 56 - mauve: '276.667 59.016% 76.078%', 57 57 - red: '358.812 67.785% 70.784%', 58 58 - maroon: '357.778 65.854% 75.882%', 59 59 - peach: '20.331 79.085% 70%', 60 60 - yellow: '39.529 62.044% 73.137%', 61 61 - green: '95.833 43.902% 67.843%', 62 62 - teal: '171.549 39.227% 64.51%', 63 63 - sky: '189.091 47.826% 72.941%', 64 64 - sapphire: '198.621 55.414% 69.216%', 65 65 - blue: '221.633 74.242% 74.118%', 66 66 - lavender: '238.909 66.265% 83.725%', 67 67 - text: '227.234 70.149% 86.863%', 68 68 - subtext1: '226.667 43.689% 79.804%', 69 69 - subtext0: '228.293 29.496% 72.745%', 70 70 - overlay2: '227.692 22.286% 65.686%', 71 71 - overlay1: '226.667 16.981% 58.431%', 72 72 - overlay0: '229.091 13.36% 51.569%', 73 73 - surface2: '228 13.274% 44.314%', 74 74 - surface1: '227.143 14.737% 37.255%', 75 75 - surface0: '230 15.584% 30.196%', 76 76 - base: '229.091 18.644% 23.137%', 77 77 - mantle: '230.526 18.812% 19.804%', 78 78 - crust: '229.412 19.54% 17.059%', 79 79 - }, 80 80 - } 81 81 - 82 82 - const macchiato: ThemeDefinition = { 83 83 - id: 'macchiato', 84 84 - name: 'Macchiato', 85 85 - type: 'dark', 86 86 - variables: { 87 87 - rosewater: '10 57.692% 89.804%', 88 88 - flamingo: '0 58.333% 85.882%', 89 89 - pink: '316.071 73.684% 85.098%', 90 90 - mauve: '266.512 82.692% 79.608%', 91 91 - red: '351.176 73.913% 72.941%', 92 92 - maroon: '355.059 71.429% 76.667%', 93 93 - peach: '21.356 85.507% 72.941%', 94 94 - yellow: '40.253 69.912% 77.843%', 95 95 - green: '105.217 48.252% 71.961%', 96 96 - teal: '171.081 46.835% 69.02%', 97 97 - sky: '188.78 59.42% 72.941%', 98 98 - sapphire: '198.641 65.605% 69.216%', 99 99 - blue: '220.189 82.813% 74.902%', 100 100 - lavender: '234.462 82.278% 84.51%', 101 101 - text: '227.442 68.254% 87.647%', 102 102 - subtext1: '228 39.216% 80%', 103 103 - subtext0: '227.368 26.761% 72.157%', 104 104 - overlay2: '228.333 20% 64.706%', 105 105 - overlay1: '227.647 15.455% 56.863%', 106 106 - overlay0: '230.323 12.351% 49.216%', 107 107 - surface2: '229.655 13.744% 41.373%', 108 108 - surface1: '231.111 15.607% 33.922%', 109 109 - surface0: '230.4 18.797% 26.078%', 110 110 - base: '231.818 23.404% 18.431%', 111 111 - mantle: '233.333 23.077% 15.294%', 112 112 - crust: '235.714 22.581% 12.157%', 113 113 - }, 114 114 - } 115 115 - 116 116 - const mocha: ThemeDefinition = { 117 117 - id: 'mocha', 118 118 - name: 'Mocha', 119 119 - type: 'dark', 120 120 - variables: { 121 121 - rosewater: '9.6 55.556% 91.176%', 122 122 - flamingo: '0 58.73% 87.647%', 123 123 - pink: '316.471 71.831% 86.078%', 124 124 - mauve: '267.407 83.505% 80.98%', 125 125 - red: '343.269 81.25% 74.902%', 126 126 - maroon: '350.4 65.217% 77.451%', 127 127 - peach: '22.957 92% 75.49%', 128 128 - yellow: '41.351 86.047% 83.137%', 129 129 - green: '115.455 54.098% 76.078%', 130 130 - teal: '170 57.353% 73.333%', 131 131 - sky: '189.184 71.014% 72.941%', 132 132 - sapphire: '198.5 75.949% 69.02%', 133 133 - blue: '217.168 91.87% 75.882%', 134 134 - lavender: '231.892 97.368% 85.098%', 135 135 - text: '226.154 63.934% 88.039%', 136 136 - subtext1: '226.667 35.294% 80%', 137 137 - subtext0: '227.647 23.611% 71.765%', 138 138 - overlay2: '228.387 16.757% 63.725%', 139 139 - overlay1: '229.655 12.775% 55.49%', 140 140 - overlay0: '230.769 10.744% 47.451%', 141 141 - surface2: '232.5 12% 39.216%', 142 142 - surface1: '234.286 13.208% 31.176%', 143 143 - surface0: '236.842 16.239% 22.941%', 144 144 - base: '240 21.053% 14.902%', 145 145 - mantle: '240 21.311% 11.961%', 146 146 - crust: '240 22.727% 8.627%', 147 147 - }, 148 148 - } 149 149 - 150 150 - export const AccentColours = [ 151 151 - 'rosewater', 152 152 - 'flamingo', 153 153 - 'pink', 154 154 - 'mauve', 155 155 - 'red', 156 156 - 'maroon', 157 157 - 'peach', 158 158 - 'yellow', 159 159 - 'green', 160 160 - 'teal', 161 161 - 'sky', 162 162 - 'sapphire', 163 163 - 'blue', 164 164 - 'lavender', 165 165 - ] as const 166 166 - export type AccentColour = (typeof AccentColours)[number] 167 167 - export const themes = [latte, frappe, macchiato, mocha] 6 6 + import { themes } from '@/themes' 7 7 + import type { ThemeDefinition } from '@/themes' 168 8 169 9 const STORAGE_KEYS = KEYS.THEME 170 10 ··· 172 12 const env = useEnvironmentStore() 173 13 174 14 const followSystem = ref(true) 175 175 - const preferredLight = ref<string>('latte') 176 176 - const preferredDark = ref<string>('mocha') 15 15 + const preferredLight = ref<string>('ctp-latte') 16 16 + const preferredDark = ref<string>('ctp-mocha') 177 17 const currentMode = ref<'light' | 'dark'>('dark') 178 178 - const preferredAccent = ref<AccentColour>('mauve') 18 18 + const preferredAccent = ref<string>('mauve') 179 19 180 180 - const activeTheme = computed(() => { 20 20 + const activeTheme = computed<ThemeDefinition>(() => { 181 21 let targetId: string 182 22 183 23 if (followSystem.value) { ··· 186 26 targetId = currentMode.value === 'dark' ? preferredDark.value : preferredLight.value 187 27 } 188 28 189 189 - return themes.find((t) => t.id === targetId) || mocha 29 29 + return themes.find((t) => t.id === targetId) || themes.find((t) => t.id === 'mocha')! 190 30 }) 191 31 32 32 + const availableAccents = computed(() => Object.keys(activeTheme.value.accents)) 33 33 + 192 34 function setFollowSystem(val: boolean) { 193 35 followSystem.value = val 194 36 } ··· 197 39 if (themes.find((t) => t.id === themeId && t.type === 'light')) { 198 40 preferredLight.value = themeId 199 41 currentMode.value = 'light' 42 42 + 43 43 + const theme = themes.find((t) => t.id === themeId) 44 44 + if (theme?.accents[preferredAccent.value] === undefined) 45 45 + preferredAccent.value = Object.keys(theme?.accents || {})[0] || 'mauve' 200 46 } 201 47 } 202 48 ··· 204 50 if (themes.find((t) => t.id === themeId && t.type === 'dark')) { 205 51 preferredDark.value = themeId 206 52 currentMode.value = 'dark' 53 53 + 54 54 + const theme = themes.find((t) => t.id === themeId) 55 55 + if (theme?.accents[preferredAccent.value] === undefined) 56 56 + preferredAccent.value = Object.keys(theme?.accents || {})[0] || 'mauve' 207 57 } 208 58 } 209 59 210 210 - function setAccent(colour: AccentColour) { 211 211 - if (AccentColours.includes(colour)) { 60 60 + function setAccent(colour: string) { 61 61 + if (availableAccents.value.includes(colour)) { 212 62 preferredAccent.value = colour 213 63 } 214 64 } ··· 216 66 function applyTheme() { 217 67 const root = document.documentElement 218 68 const theme = activeTheme.value 219 219 - const accentKey = preferredAccent.value 69 69 + 70 70 + Object.entries(theme.ui).forEach(([key, value]) => { 71 71 + root.style.setProperty(`--${key}`, value) 72 72 + }) 220 73 221 221 - Object.entries(theme.variables).forEach(([key, value]) => { 74 74 + Object.entries(theme.accents).forEach(([key, value]) => { 222 75 root.style.setProperty(`--${key}`, value) 223 76 }) 224 77 225 225 - const accentValue = theme.variables[accentKey] 78 78 + const accentValue = theme.accents[preferredAccent.value] || Object.values(theme.accents)[0] 226 79 if (accentValue) root.style.setProperty('--accent', accentValue) 227 80 228 81 root.setAttribute('data-theme', theme.id) 229 82 230 83 const metaThemeColor = document.querySelector('meta[name="theme-colour"]') 231 84 if (metaThemeColor) { 232 232 - metaThemeColor.setAttribute('content', `hsl(${theme.variables.mantle})`) 85 85 + metaThemeColor.setAttribute('content', `hsl(${theme.ui.mantle})`) 233 86 } 234 87 } 235 88 ··· 256 109 currentMode.value = env.prefersDarkScheme ? 'dark' : 'light' 257 110 } 258 111 259 259 - const storedAccent = localStorage.getItem(STORAGE_KEYS.ACCENT_COLOUR) as AccentColour 260 260 - if (storedAccent && AccentColours.includes(storedAccent)) { 112 112 + const storedAccent = localStorage.getItem(STORAGE_KEYS.ACCENT_COLOUR) 113 113 + if (storedAccent) { 261 114 preferredAccent.value = storedAccent 262 115 } 263 116 ··· 283 136 284 137 return { 285 138 themes, 286 286 - AccentColours, 139 139 + availableAccents, 287 140 followSystem, 288 141 preferredLight, 289 142 preferredDark,

+145

src/themes/catppuccin.ts

··· 1 1 + import type { ThemeDefinition } from './types' 2 2 + 3 3 + export const latte: ThemeDefinition = { 4 4 + id: 'ctp-latte', 5 5 + name: 'Catppuccin Latte', 6 6 + type: 'light', 7 7 + ui: { 8 8 + text: '233.793 16.022% 35.49%', 9 9 + subtext1: '233.333 12.796% 41.373%', 10 10 + subtext0: '232.8 10.373% 47.255%', 11 11 + overlay2: '232.174 9.623% 53.137%', 12 12 + overlay1: '231.429 10.048% 59.02%', 13 13 + overlay0: '228 11.236% 65.098%', 14 14 + surface2: '226.667 12.162% 70.98%', 15 15 + surface1: '225 13.559% 76.863%', 16 16 + surface0: '222.857 15.909% 82.745%', 17 17 + base: '220 23.077% 94.902%', 18 18 + mantle: '220 21.951% 91.961%', 19 19 + crust: '220 20.69% 88.627%', 20 20 + }, 21 21 + accents: { 22 22 + rosewater: '10.8 58.824% 66.667%', 23 23 + flamingo: '0 59.763% 66.863%', 24 24 + pink: '316.034 73.418% 69.02%', 25 25 + mauve: '266.044 85.047% 58.039%', 26 26 + red: '347.077 86.667% 44.118%', 27 27 + maroon: '354.783 76.303% 58.627%', 28 28 + peach: '21.975 99.184% 51.961%', 29 29 + yellow: '34.948 76.984% 49.412%', 30 30 + green: '109.231 57.635% 39.804%', 31 31 + teal: '183.231 73.864% 34.51%', 32 32 + sky: '197.067 96.567% 45.686%', 33 33 + sapphire: '188.859 69.953% 41.765%', 34 34 + blue: '219.907 91.489% 53.922%', 35 35 + lavender: '230.935 97.203% 71.961%', 36 36 + }, 37 37 + } 38 38 + 39 39 + export const frappe: ThemeDefinition = { 40 40 + id: 'ctp-frappe', 41 41 + name: 'Catppuccin Frappé', 42 42 + type: 'dark', 43 43 + ui: { 44 44 + text: '227.234 70.149% 86.863%', 45 45 + subtext1: '226.667 43.689% 79.804%', 46 46 + subtext0: '228.293 29.496% 72.745%', 47 47 + overlay2: '227.692 22.286% 65.686%', 48 48 + overlay1: '226.667 16.981% 58.431%', 49 49 + overlay0: '229.091 13.36% 51.569%', 50 50 + surface2: '228 13.274% 44.314%', 51 51 + surface1: '227.143 14.737% 37.255%', 52 52 + surface0: '230 15.584% 30.196%', 53 53 + base: '229.091 18.644% 23.137%', 54 54 + mantle: '230.526 18.812% 19.804%', 55 55 + crust: '229.412 19.54% 17.059%', 56 56 + }, 57 57 + accents: { 58 58 + rosewater: '10.286 57.377% 88.039%', 59 59 + flamingo: '0 58.537% 83.922%', 60 60 + pink: '316 73.171% 83.922%', 61 61 + mauve: '276.667 59.016% 76.078%', 62 62 + red: '358.812 67.785% 70.784%', 63 63 + maroon: '357.778 65.854% 75.882%', 64 64 + peach: '20.331 79.085% 70%', 65 65 + yellow: '39.529 62.044% 73.137%', 66 66 + green: '95.833 43.902% 67.843%', 67 67 + teal: '171.549 39.227% 64.51%', 68 68 + sky: '189.091 47.826% 72.941%', 69 69 + sapphire: '198.621 55.414% 69.216%', 70 70 + blue: '221.633 74.242% 74.118%', 71 71 + lavender: '238.909 66.265% 83.725%', 72 72 + }, 73 73 + } 74 74 + 75 75 + export const macchiato: ThemeDefinition = { 76 76 + id: 'ctp-macchiato', 77 77 + name: 'Catppuccin Macchiato', 78 78 + type: 'dark', 79 79 + ui: { 80 80 + text: '227.442 68.254% 87.647%', 81 81 + subtext1: '228 39.216% 80%', 82 82 + subtext0: '227.368 26.761% 72.157%', 83 83 + overlay2: '228.333 20% 64.706%', 84 84 + overlay1: '227.647 15.455% 56.863%', 85 85 + overlay0: '230.323 12.351% 49.216%', 86 86 + surface2: '229.655 13.744% 41.373%', 87 87 + surface1: '231.111 15.607% 33.922%', 88 88 + surface0: '230.4 18.797% 26.078%', 89 89 + base: '231.818 23.404% 18.431%', 90 90 + mantle: '233.333 23.077% 15.294%', 91 91 + crust: '235.714 22.581% 12.157%', 92 92 + }, 93 93 + accents: { 94 94 + rosewater: '10 57.692% 89.804%', 95 95 + flamingo: '0 58.333% 85.882%', 96 96 + pink: '316.071 73.684% 85.098%', 97 97 + mauve: '266.512 82.692% 79.608%', 98 98 + red: '351.176 73.913% 72.941%', 99 99 + maroon: '355.059 71.429% 76.667%', 100 100 + peach: '21.356 85.507% 72.941%', 101 101 + yellow: '40.253 69.912% 77.843%', 102 102 + green: '105.217 48.252% 71.961%', 103 103 + teal: '171.081 46.835% 69.02%', 104 104 + sky: '188.78 59.42% 72.941%', 105 105 + sapphire: '198.641 65.605% 69.216%', 106 106 + blue: '220.189 82.813% 74.902%', 107 107 + lavender: '234.462 82.278% 84.51%', 108 108 + }, 109 109 + } 110 110 + 111 111 + export const mocha: ThemeDefinition = { 112 112 + id: 'ctp-mocha', 113 113 + name: 'Catppuccin Mocha', 114 114 + type: 'dark', 115 115 + ui: { 116 116 + text: '226.154 63.934% 88.039%', 117 117 + subtext1: '226.667 35.294% 80%', 118 118 + subtext0: '227.647 23.611% 71.765%', 119 119 + overlay2: '228.387 16.757% 63.725%', 120 120 + overlay1: '229.655 12.775% 55.49%', 121 121 + overlay0: '230.769 10.744% 47.451%', 122 122 + surface2: '232.5 12% 39.216%', 123 123 + surface1: '234.286 13.208% 31.176%', 124 124 + surface0: '236.842 16.239% 22.941%', 125 125 + base: '240 21.053% 14.902%', 126 126 + mantle: '240 21.311% 11.961%', 127 127 + crust: '240 22.727% 8.627%', 128 128 + }, 129 129 + accents: { 130 130 + rosewater: '9.6 55.556% 91.176%', 131 131 + flamingo: '0 58.73% 87.647%', 132 132 + pink: '316.471 71.831% 86.078%', 133 133 + mauve: '267.407 83.505% 80.98%', 134 134 + red: '343.269 81.25% 74.902%', 135 135 + maroon: '350.4 65.217% 77.451%', 136 136 + peach: '22.957 92% 75.49%', 137 137 + yellow: '41.351 86.047% 83.137%', 138 138 + green: '115.455 54.098% 76.078%', 139 139 + teal: '170 57.353% 73.333%', 140 140 + sky: '189.184 71.014% 72.941%', 141 141 + sapphire: '198.5 75.949% 69.02%', 142 142 + blue: '217.168 91.87% 75.882%', 143 143 + lavender: '231.892 97.368% 85.098%', 144 144 + }, 145 145 + }

+141

src/themes/evergarden.ts

··· 1 1 + /* 2 2 + * @see https://codeberg.org/evergarden 3 3 + * https://evergarden.moe 4 4 + */ 5 5 + import type { ThemeDefinition } from './types' 6 6 + 7 7 + export const spring: ThemeDefinition = { 8 8 + id: 'evg-spring', 9 9 + name: 'Evergarden Spring', 10 10 + type: 'dark', 11 11 + ui: { 12 12 + text: '64 58.621% 94.314%', 13 13 + subtext1: '152 20.588% 73.333%', 14 14 + subtext0: '160 16.667% 64.706%', 15 15 + overlay2: '171 12.217% 56.667%', 16 16 + overlay1: '182 10.121% 48.431%', 17 17 + overlay0: '194 10.66% 38.627%', 18 18 + surface2: '193 10.843% 32.549%', 19 19 + surface1: '198 12.057% 27.647%', 20 20 + surface0: '200 12.605% 23.333%', 21 21 + base: '198 13.131% 19.412%', 22 22 + mantle: '202 13.58% 15.882%', 23 23 + crust: '200 13.846% 12.745%', 24 24 + }, 25 25 + accents: { 26 26 + red: '358 85.507% 72.941%', 27 27 + orange: '16 87.97% 73.922%', 28 28 + yellow: '36 82.301% 77.843%', 29 29 + lime: '72 52.381% 79.412%', 30 30 + green: '90 46.154% 79.608%', 31 31 + aqua: '149 46.154% 79.608%', 32 32 + skye: '167 50.495% 80.196%', 33 33 + snow: '194 52.381% 79.412%', 34 34 + blue: '216 62.105% 81.373%', 35 35 + purple: '263 69.231% 84.706%', 36 36 + pink: '316 68% 85.294%', 37 37 + cherry: '326 68.966% 88.627%', 38 38 + }, 39 39 + } 40 40 + 41 41 + export const summer: ThemeDefinition = { 42 42 + id: 'evg-summer', 43 43 + name: 'Evergarden Summer', 44 44 + type: 'light', 45 45 + ui: { 46 46 + text: '203 14.815% 10.588%', 47 47 + subtext1: '195 13.333% 29.412%', 48 48 + subtext0: '193 12.299% 36.667%', 49 49 + overlay2: '192 11.607% 43.922%', 50 50 + overlay1: '193 10.843% 51.176%', 51 51 + overlay0: '194 13.744% 58.627%', 52 52 + surface2: '193 16.471% 66.667%', 53 53 + surface1: '195 19.048% 75.294%', 54 54 + surface0: '203 22.5% 84.314%', 55 55 + base: '210 33.333% 88.235%', 56 56 + mantle: '209 29.412% 83.333%', 57 57 + crust: '212 29.412% 80%', 58 58 + }, 59 59 + accents: { 60 60 + red: '359 40.845% 58.235%', 61 61 + orange: '19 40.952% 58.824%', 62 62 + yellow: '36 37.674% 57.843%', 63 63 + lime: '68 28.251% 56.275%', 64 64 + green: '89 24.887% 56.667%', 65 65 + aqua: '149 21.659% 57.451%', 66 66 + skye: '169 18.584% 55.686%', 67 67 + snow: '194 20.188% 58.235%', 68 68 + blue: '214 25.683% 64.118%', 69 69 + purple: '263 27.848% 69.02%', 70 70 + pink: '318 29.333% 70.588%', 71 71 + cherry: '326 26.316% 73.922%', 72 72 + }, 73 73 + } 74 74 + 75 75 + export const fall: ThemeDefinition = { 76 76 + id: 'evg-fall', 77 77 + name: 'Evergarden Fall', 78 78 + type: 'dark', 79 79 + ui: { 80 80 + text: '64 58.621% 94.314%', 81 81 + subtext1: '152 20.588% 73.333%', 82 82 + subtext0: '160 16.667% 64.706%', 83 83 + overlay2: '171 12.217% 56.667%', 84 84 + overlay1: '182 10.121% 48.431%', 85 85 + overlay0: '194 10.66% 38.627%', 86 86 + surface2: '193 10.843% 32.549%', 87 87 + surface1: '197 11.29% 24.314%', 88 88 + surface0: '200 12.245% 19.216%', 89 89 + base: '202 13.58% 15.882%', 90 90 + mantle: '200 13.846% 12.745%', 91 91 + crust: '203 14.815% 10.588%', 92 92 + }, 93 93 + accents: { 94 94 + red: '358 85.507% 72.941%', 95 95 + orange: '16 87.97% 73.922%', 96 96 + yellow: '36 82.301% 77.843%', 97 97 + lime: '72 52.381% 79.412%', 98 98 + green: '90 46.154% 79.608%', 99 99 + aqua: '149 46.154% 79.608%', 100 100 + skye: '167 50.495% 80.196%', 101 101 + snow: '194 52.381% 79.412%', 102 102 + blue: '216 62.105% 81.373%', 103 103 + purple: '263 69.231% 84.706%', 104 104 + pink: '316 68% 85.294%', 105 105 + cherry: '326 68.966% 88.627%', 106 106 + }, 107 107 + } 108 108 + 109 109 + export const winter: ThemeDefinition = { 110 110 + id: 'evg-winter', 111 111 + name: 'Evergarden Winter', 112 112 + type: 'dark', 113 113 + ui: { 114 114 + text: '64 58.621% 94.314%', 115 115 + subtext1: '152 20.588% 73.333%', 116 116 + subtext0: '160 16.667% 64.706%', 117 117 + overlay2: '171 12.217% 56.667%', 118 118 + overlay1: '182 10.121% 48.431%', 119 119 + overlay0: '194 10.66% 38.627%', 120 120 + surface2: '193 10.843% 32.549%', 121 121 + surface1: '197 11.29% 24.314%', 122 122 + surface0: '198 14.607% 17.451%', 123 123 + base: '198 14.286% 13.725%', 124 124 + mantle: '203 13.793% 11.373%', 125 125 + crust: '203 14.815% 10.588%', 126 126 + }, 127 127 + accents: { 128 128 + red: '358 85.507% 72.941%', 129 129 + orange: '16 87.97% 73.922%', 130 130 + yellow: '36 82.301% 77.843%', 131 131 + lime: '72 52.381% 79.412%', 132 132 + green: '90 46.154% 79.608%', 133 133 + aqua: '149 46.154% 79.608%', 134 134 + skye: '167 50.495% 80.196%', 135 135 + snow: '194 52.381% 79.412%', 136 136 + blue: '216 62.105% 81.373%', 137 137 + purple: '263 69.231% 84.706%', 138 138 + pink: '316 68% 85.294%', 139 139 + cherry: '326 68.966% 88.627%', 140 140 + }, 141 141 + }

+16

src/themes/index.ts

··· 1 1 + export * from './types' 2 2 + 3 3 + import * as catppuccin from './catppuccin' 4 4 + import * as evergarden from './evergarden' 5 5 + 6 6 + const themes = [ 7 7 + catppuccin.latte, 8 8 + catppuccin.frappe, 9 9 + catppuccin.macchiato, 10 10 + catppuccin.mocha, 11 11 + evergarden.spring, 12 12 + evergarden.summer, 13 13 + evergarden.fall, 14 14 + evergarden.winter, 15 15 + ] 16 16 + export { themes }

+25

src/themes/types.ts

··· 1 1 + export interface ThemeUI { 2 2 + crust: string 3 3 + mantle: string 4 4 + base: string 5 5 + 6 6 + surface0: string 7 7 + surface1: string 8 8 + surface2: string 9 9 + 10 10 + overlay0: string 11 11 + overlay1: string 12 12 + overlay2: string 13 13 + 14 14 + subtext0: string 15 15 + subtext1: string 16 16 + text: string 17 17 + } 18 18 + 19 19 + export interface ThemeDefinition { 20 20 + id: string 21 21 + name: string 22 22 + type: 'light' | 'dark' 23 23 + ui: ThemeUI 24 24 + accents: Record<string, string> 25 25 + }

+3 -3

src/views/Onboarding/steps/ThemeStep.vue

··· 36 36 :class="{ active: themeStore.activeTheme.id === t.id }" 37 37 @click="selectTheme(t.id, t.type)" 38 38 :style="{ 39 39 - '--t-base': `hsl(${t.variables.base})`, 40 40 - '--t-text': `hsl(${t.variables.text})`, 41 41 - '--t-blue': `hsl(${t.variables.blue})`, 39 39 + '--t-base': `hsl(${t.ui.base})`, 40 40 + '--t-text': `hsl(${t.ui.text})`, 41 41 + '--t-blue': `hsl(${t.accents.blue})`, 42 42 }" 43 43 > 44 44 <div class="card-bg"></div>

+3 -3

src/views/SettingsPage.vue

··· 70 70 <template #end> 71 71 <div 72 72 class="mini-palette" 73 73 - :style="{ background: `hsl(${themeStore.activeTheme.variables.base})` }" 73 73 + :style="{ background: `hsl(${themeStore.activeTheme.ui.base})` }" 74 74 > 75 75 <div 76 76 class="dot" 77 77 - :style="{ background: `hsl(${themeStore.activeTheme.variables.blue})` }" 77 77 + :style="{ background: `hsl(${themeStore.activeTheme.accents.blue})` }" 78 78 ></div> 79 79 <div 80 80 class="dot" 81 81 - :style="{ background: `hsl(${themeStore.activeTheme.variables.pink})` }" 81 81 + :style="{ background: `hsl(${themeStore.activeTheme.accents.pink})` }" 82 82 ></div> 83 83 </div> 84 84 <IconChevronRightRounded class="chevron" />