Theme preset selector

Author: connorabbas

src/app.js

@@ -3,7 +3,7 @@ import './assets/css/tailwind.css';
 import 'nprogress/nprogress.css';
 
 import { useColorMode } from '@vueuse/core';
-import customThemePreset from './theme/noir-preset';
+import { useThemePreset } from '@/composables/useThemePreset';
 
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
@@ -19,14 +19,20 @@ import PageTitleSection from '@/components/PageTitleSection.vue';
 
 const app = createApp(App);
 const pinia = createPinia();
+
+// Site light/dark mode
 const colorMode = useColorMode({ emitAuto: true });
 
+// Site theme preset
+const { getCurrentPreset } = useThemePreset();
+const themePreset = getCurrentPreset();
+
 app.provide('colorMode', colorMode)
     .use(pinia)
     .use(router)
     .use(PrimeVue, {
         theme: {
-            preset: customThemePreset,
+            preset: themePreset,
             options: {
                 darkModeSelector: '.dark',
                 cssLayer: {

src/composables/useThemePreset.ts

@@ -0,0 +1,50 @@
+import { ref, Ref } from 'vue';
+import { usePreset } from '@primeuix/themes';
+import { Preset } from '@primeuix/themes/types';
+import { useStorage } from '@vueuse/core';
+import bootstrap from '@/theme/bootstrap-preset';
+import breeze from '@/theme/breeze-preset';
+import enterprise from '@/theme/enterprise-preset';
+import noir from '@/theme/noir-preset';
+import warm from '@/theme/warm-preset';
+
+interface ThemePreset {
+    label: string,
+    value: string,
+    preset: Preset,
+}
+
+const presets = ref<ThemePreset[]>([
+    { label: 'Bootstrap', value: 'bootstrap', preset: bootstrap },
+    { label: 'Breeze', value: 'breeze', preset: breeze },
+    { label: 'Enterprise', value: 'enterprise', preset: enterprise },
+    { label: 'Noir', value: 'noir', preset: noir },
+    { label: 'Warm', value: 'warm', preset: warm },
+]);
+
+const selectedPreset: Ref<string> = useStorage('theme-preset', 'noir');
+
+function getCurrentPreset(): Preset {
+    return (
+        presets.value.find((p) => p.value === selectedPreset.value)?.preset ||
+        presets.value[3].preset
+    );
+}
+
+function setPreset(presetValue: string): void {
+    const themePreset = presets.value.find((p) => p.value === presetValue);
+    if (themePreset) {
+        usePreset(themePreset.preset);
+    }
+}
+
+setPreset(selectedPreset.value);
+
+export function useThemePreset() {
+    return {
+        presets,
+        selectedPreset,
+        getCurrentPreset,
+        setPreset,
+    };
+}

src/layouts/app/HeaderLayout.vue

@@ -46,7 +46,7 @@ const toggleMobileUserMenu = (event) => {
                 <div>
                     <PanelMenu
                         :model="menuItems"
-                        class="w-full"
+                        class="mt-1 w-full"
                     />
                 </div>
                 <template #footer>

src/layouts/app/SidebarLayout.vue

@@ -44,7 +44,7 @@ const toggleMobileUserMenu = (event) => {
                 <div>
                     <PanelMenu
                         :model="menuItems"
-                        class="w-full"
+                        class="mt-1 w-full"
                     />
                 </div>
                 <template #footer>
@@ -117,7 +117,7 @@ const toggleMobileUserMenu = (event) => {
                         <div>
                             <PanelMenu
                                 :model="menuItems"
-                                class="w-full"
+                                class="mt-1 w-full"
                             />
                         </div>
                     </div>

src/views/settings/Appearance.vue

@@ -2,6 +2,9 @@
 import AppLayout from '@/layouts/AppLayout.vue';
 import SettingsLayout from '@/layouts/UserSettingsLayout.vue';
 import SelectColorModeButton from '@/components/SelectColorModeButton.vue';
+import { useThemePreset } from '@/composables/useThemePreset';
+
+const { presets, selectedPreset, setPreset } = useThemePreset();
 </script>
 
 <template>
@@ -18,7 +21,22 @@ import SelectColorModeButton from '@/components/SelectColorModeButton.vue';
                     Update your account's appearance settings
                 </template>
                 <template #content>
-                    <SelectColorModeButton />
+                    <div class="space-y-6">
+                        <div class="flex flex-col gap-2">
+                            <label for="color-mode-selector">Color Mode</label>
+                            <SelectColorModeButton id="color-mode-selector" />
+                        </div>
+                        <div class="flex flex-col gap-2">
+                            <label for="theme-preset-selector">Theme</label>
+                            <Select
+                                v-model="selectedPreset"
+                                :options="presets"
+                                optionLabel="label"
+                                optionValue="value"
+                                @change="setPreset(selectedPreset)"
+                            />
+                        </div>
+                    </div>
                 </template>
             </Card>
         </SettingsLayout>