Refactor theme management logic for clarity and efficiency

Author: michaelnabil230

resources/js/dashboard/composables/useAppearance.ts

@@ -2,19 +2,25 @@ import { onMounted, ref } from 'vue';
 
 type Appearance = 'light' | 'dark' | 'system';
 
+const getCurrentTheme = (): Appearance => {
+    return document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+};
+
 export function updateTheme(value: Appearance) {
     if (typeof window === 'undefined') {
         return;
     }
 
-    const toggleMode = () => {
-        if (value === 'system') {
-            const systemTheme = mediaQuery()?.matches ? 'dark' : 'light';
+    const systemTheme = mediaQuery()?.matches ? 'dark' : 'light';
+    const desiredTheme = value === 'system' ? systemTheme : value;
+    const currentTheme = getCurrentTheme();
 
-            document.documentElement.classList.toggle('dark', systemTheme === 'dark');
-        } else {
-            document.documentElement.classList.toggle('dark', value === 'dark');
-        }
+    if (currentTheme === desiredTheme) {
+        return;
+    }
+
+    const toggleMode = () => {
+        document.documentElement.classList.toggle('dark', desiredTheme === 'dark');
     };
 
     if (typeof document.startViewTransition === 'function') {
@@ -46,7 +52,7 @@ const handleSystemThemeChange = () => {
     updateTheme(currentAppearance || 'system');
 };
 
-export function initializeTheme() {
+export const initializeTheme = () => {
     if (typeof window === 'undefined') {
         return;
     }
@@ -55,7 +61,7 @@ export function initializeTheme() {
     updateTheme(savedAppearance || 'system');
 
     mediaQuery()?.addEventListener('change', handleSystemThemeChange);
-}
+};
 
 export function useAppearance() {
     const appearance = ref<Appearance>('system');
@@ -70,13 +76,13 @@ export function useAppearance() {
         }
     });
 
-    function updateAppearance(value: Appearance) {
+    const updateAppearance = (value: Appearance) => {
         appearance.value = value;
 
         localStorage.setItem('appearance', value);
 
         updateTheme(value);
-    }
+    };
 
     return {
         appearance,