move theme into UI store

zero.Backoffice.UI/app/app.vue

@@ -46,6 +46,10 @@
         this.accountStore.user = userResponse.data;
         await useUiStore().setup();
       }
+      else
+      {
+        await useUiStore().setup(true);
+      }
 
       await useTranslationStore().setup();
 

zero.Backoffice.UI/app/modules/media/pages/overview/overview-item.vue

@@ -3,7 +3,7 @@
     <div class="media-item-preview" :class="{'media-pattern': value.image, 'is-covered': covered }">
       <span class="media-item-check"><ui-icon symbol="fth-check" :size="14" /></span>
       <img class="media-item-image" v-if="value.image" :src="value.image" />
-      <span class="media-item-icon" v-if="!value.image"><ui-icon :symbol="(value.isFolder ? 'fth-folder' : 'fth-file')" :size="36" :stroke-width="1.5" /></span>
+      <span class="media-item-icon" v-if="!value.image"><ui-icon :symbol="(value.isFolder ? 'fth-folder' : 'fth-file')" :size="26" :stroke-width="2" /></span>
     </div>
     <p class="media-item-text">
       <span :title="value.name">{{value.name}} <!--<ui-icon symbol="fth-cloud" v-if="value.isShared" :size="15" class="media-item-shared" />--></span>

zero.Backoffice.UI/app/ui/app-navigation.vue

@@ -51,8 +51,8 @@
       <ui-dropdown-button label="Edit" icon="fth-edit-2" @click="editUser" />
       <ui-dropdown-button label="Change password" icon="fth-lock" @click="changePassword" />
       <!--<ui-dropdown-button label="Toggle sidebar" icon="fth-minimize-2" @click="toggleSidebar" />-->
-      <ui-dropdown-button label="Dark theme" v-if="!darkTheme" icon="fth-moon" @click="toggleDarkTheme" />
-      <ui-dropdown-button label="Light theme" v-if="darkTheme" icon="fth-sun" @click="toggleDarkTheme" />
+      <ui-dropdown-button label="Dark theme" v-if="ui.preferences.theme !== 'dark'" icon="fth-moon" @click="ui.setTheme('dark')" />
+      <ui-dropdown-button label="Light theme" v-else icon="fth-sun" @click="ui.setTheme('light')" />
       <ui-dropdown-button label="Logout" icon="fth-log-out" @click="logout" />
     </ui-dropdown>
 
@@ -161,15 +161,6 @@
         localStorage.setItem(compactCacheKey, this.compact.toString());
       },
 
-      toggleDarkTheme()
-      {
-        this.darkTheme = !this.darkTheme;
-        EventHub.emit('app.theme', this.darkTheme ? 'dark' : 'light');
-        localStorage.setItem(themeCacheKey, this.darkTheme ? 'dark' : 'light');
-        document.body.classList.toggle('theme-light', !this.darkTheme);
-        document.body.classList.toggle('theme-dark', this.darkTheme);
-      },
-
       openSearch()
       {
         //EventHub.$emit('app.search.open');

zero.Backoffice.UI/app/ui/app-overlays.vue

@@ -50,11 +50,6 @@
       });
     },
 
-    beforeDestroy()
-    {
-      this.$el.removeEventListener('keyup');
-    },
-
     methods: {
 
       add(instance)

zero.Backoffice.UI/app/ui/store.ts

@@ -3,8 +3,14 @@ import { defineStore } from 'pinia';
 import { UiFlavorProvider, UiIconSet, UiSection, UiSettingsGroup, UiStoreState } from 'zero/ui';
 import api from './api';
 
+const THEME_KEY = 'zero.theme';
+
 export const useUiStore = defineStore('zero.ui', {
   state: () => ({
+    preferences: {
+      theme: 'dark'
+    },
+
     sections: [],
     settingGroups: [],
     iconSets: [],
@@ -13,8 +19,15 @@ export const useUiStore = defineStore('zero.ui', {
   } as UiStoreState),
 
   actions: {
-    async setup()
+    async setup(anonymous)
     {
+      this.setTheme(localStorage.getItem(THEME_KEY) || 'default');
+
+      if (anonymous)
+      {
+        return;
+      }
+
       const values = await Promise.all([
         api.getSections(),
         api.getSettingGroups(),
@@ -28,6 +41,16 @@ export const useUiStore = defineStore('zero.ui', {
       this.iconSets = values[2].data as UiIconSet[];
       this.flavors = values[3].data as Record<string, UiFlavorProvider>;
       this.blueprints = values[4].data as string[];
+    },
+
+    setTheme(theme: 'default' | 'light' | 'dark')
+    {
+      const dark = theme === 'dark';
+      this.preferences.theme = theme;
+      localStorage.setItem(THEME_KEY, theme);
+
+      document.body.classList.toggle('theme-light', !dark);
+      document.body.classList.toggle('theme-dark', dark);
     }
   }
 });

zero.Backoffice.UI/app/ui/ui.d.ts

@@ -3,6 +3,8 @@ declare module 'zero/ui'
 {
   export interface UiStoreState
   {
+    preferences: UiPreferences;
+
     sections: UiSection[];
     settingGroups: UiSettingsGroup[];
     iconSets: UiIconSet[];
@@ -10,6 +12,11 @@ declare module 'zero/ui'
     blueprints: string[];
   }
 
+  export interface UiPreferences
+  {
+    theme: 'default' | 'dark' | 'light';
+  }
+
   export interface UiSection
   {
     alias: string;