organization

Author: connorabbas

resources/js/app.js

@@ -15,16 +15,16 @@ import PageTitleSection from '@/components/PageTitleSection.vue';
 import { useColorMode } from '@vueuse/core';
 import { useThemePreset } from '@/composables/useThemePreset';
 
-/* global Ziggy */
-const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
-
 // Site light/dark mode
 const colorMode = useColorMode({ emitAuto: true });
 
 // Site theme preset
 const { getCurrentPreset } = useThemePreset();
 const themePreset = getCurrentPreset();
 
+/* global Ziggy */
+const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
+
 createInertiaApp({
     title: (title) => `${title} - ${appName}`,
     resolve: (name) =>

resources/js/components/ThemePresetSelector.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { useThemePreset } from '@/composables/useThemePreset';
+
+const { presets, selectedPreset, setPreset } = useThemePreset();
+</script>
+
+<template>
+    <Select
+        v-model="selectedPreset"
+        :options="presets"
+        optionLabel="label"
+        optionValue="value"
+        @change="setPreset(selectedPreset)"
+    />
+</template>

resources/js/pages/settings/Appearance.vue

@@ -2,9 +2,7 @@
 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();
+import ThemePresetSelector from '@/components/ThemePresetSelector.vue';
 </script>
 
 <template>
@@ -30,13 +28,7 @@ const { presets, selectedPreset, setPreset } = useThemePreset();
                         </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)"
-                            />
+                            <ThemePresetSelector id="theme-preset-selector" />
                         </div>
                     </div>
                 </template>