adminforth 1.3.56-next.6 → 1.3.56-next.7

package/dist/spa/src/App.vue

@@ -30,8 +30,8 @@
 
 
               <span               
-              @click="toggleTheme" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black hover:bg-lightHtml dark:text-darkSidebarTextHover dark:hover:bg-darkHtml dark:hover:text-darkSidebarTextActive" role="menuitem">
-                <IconMoonSolid class="w-5 h-5 text-blue-300" v-if="theme !== 'dark'" />
+                @click="toggleTheme" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black hover:bg-lightHtml dark:text-darkSidebarTextHover dark:hover:bg-darkHtml dark:hover:text-darkSidebarTextActive" role="menuitem">
+                <IconMoonSolid class="w-5 h-5 text-blue-300" v-if="coreStore.theme !== 'dark'" />
                 <IconSunSolid class="w-5 h-5 text-yellow-300" v-else />
               </span>
               <div>
@@ -294,9 +294,7 @@ const theme = ref('light');
 
 function toggleTheme() {
   theme.value = theme.value === 'light' ? 'dark' : 'light';
-  document.documentElement.classList.toggle('dark');
-  window.localStorage.setItem('af__theme', theme.value);
-
+  coreStore.toggleTheme();
 }
 
 function clickOnMenuItem (label: string) {

package/dist/spa/src/composables/useStores.ts

@@ -7,7 +7,7 @@ import { useFiltersStore } from '@/stores/filters';
 import router from '@/router'
 import type { AdminForthResourceColumn } from '@/types/AdminForthConfig';
 
- type FilterParams = {
+type FilterParams = {
   /**
    * Field of resource to filter
    */

package/dist/spa/src/stores/core.ts

@@ -6,6 +6,8 @@ import type { Ref } from 'vue'
 
 export const useCoreStore = defineStore('core', () => {
   const resourceById: Ref<Object> = ref({});
+  const theme: Ref<'light'| 'dark'> = ref(window.localStorage.getItem('af__theme') as ('light'|'dark') || 'light');
+
   const menu = ref([]);
   const config = ref({});
   const record: Ref<any | null> = ref({});
@@ -23,6 +25,19 @@ export const useCoreStore = defineStore('core', () => {
   const resourceColumnsId = ref(null);
   const adminUser = ref(null);
 
+  async function toggleTheme() {
+    theme.value = theme.value === 'light' ? 'dark' : 'light';
+    if (theme.value === 'light') {
+      document.documentElement.classList.remove('dark');
+    } else {
+      document.documentElement.classList.add('dark');
+    }
+
+    document.documentElement.setAttribute('data-theme', theme.value);
+    theme.value = theme.value;
+    window.localStorage.setItem('af__theme', theme.value);
+  }
+
   async function fetchMenuAndResource() {
     const resp = await callAdminForthApi({
       path: '/get_base_config',
@@ -143,6 +158,8 @@ export const useCoreStore = defineStore('core', () => {
     resourceOptions,
     resource,
     adminUser,
-    resourceColumnsWithFilters
+    resourceColumnsWithFilters,
+    toggleTheme,
+    theme,
   }
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.3.56-next.6",
+  "version": "1.3.56-next.7",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "module": "dist/index.js",