theme preset selector

Author: connorabbas

resources/js/app.js

@@ -12,12 +12,18 @@ import ToastService from 'primevue/toastservice';
 import Container from '@/components/Container.vue';
 import PageTitleSection from '@/components/PageTitleSection.vue';
 
-import customThemePreset from '@/theme/noir-preset';
 import { useColorMode } from '@vueuse/core';
+import { useThemePreset } from '@/composables/useThemePreset';
 
 /* global Ziggy */
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
-const colorMode = useColorMode({ emitAuto: true }); // Set Light/Dark Color Mode
+
+// Site light/dark mode
+const colorMode = useColorMode({ emitAuto: true });
+
+// Site theme preset
+const { getCurrentPreset } = useThemePreset();
+const themePreset = getCurrentPreset();
 
 createInertiaApp({
     title: (title) => `${title} - ${appName}`,
@@ -33,7 +39,7 @@ createInertiaApp({
             .use(ZiggyVue, Ziggy)
             .use(PrimeVue, {
                 theme: {
-                    preset: customThemePreset,
+                    preset: themePreset,
                     options: {
                         darkModeSelector: '.dark',
                         cssLayer: {

resources/js/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,
+    };
+}

resources/js/layouts/app/HeaderLayout.vue

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

resources/js/layouts/app/SidebarLayout.vue

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

resources/js/pages/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>
@@ -20,7 +23,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>