fix: moved theme related code to theme.js

frontend/src/App.vue

@@ -9,8 +9,9 @@
 <script setup>
 import { Dialogs } from '@/utils/dialogs'
 import { sessionStore as session } from '@/stores/session'
+import { setTheme } from '@/stores/theme'
 import { Toasts, setConfig } from 'frappe-ui'
-import { computed, defineAsyncComponent } from 'vue'
+import { computed, defineAsyncComponent, onMounted } from 'vue'
 
 const MobileLayout = defineAsyncComponent(
   () => import('./components/Layouts/MobileLayout.vue'),
@@ -26,6 +27,8 @@ const Layout = computed(() => {
   }
 })
 
+onMounted(() => setTheme())
+
 setConfig('systemTimezone', window.timezone?.system || null)
 setConfig('localTimezone', window.timezone?.user || null)
 </script>

frontend/src/components/Layouts/AppSidebar.vue

@@ -115,9 +115,9 @@ import {
   unreadNotificationsCount,
   notificationsStore,
 } from '@/stores/notifications'
-import { FeatherIcon, TrialBanner, createResource } from 'frappe-ui'
+import { FeatherIcon } from 'frappe-ui'
 import { useStorage } from '@vueuse/core'
-import { computed, h, provide } from 'vue'
+import { computed, h } from 'vue'
 
 const { getPinnedViews, getPublicViews } = viewsStore()
 const { toggle: toggleNotificationPanel } = notificationsStore()

frontend/src/components/UserDropdown.vue

@@ -56,8 +56,8 @@ import { usersStore } from '@/stores/users'
 import { getSettings } from '@/stores/settings'
 import { showSettings } from '@/composables/settings'
 import { Dropdown } from 'frappe-ui'
-import { useStorage } from '@vueuse/core'
+import { theme, toggleTheme } from '@/stores/theme'
-import { computed, h, markRaw, onMounted } from 'vue'
+import { computed, h, markRaw } from 'vue'
 
 const props = defineProps({
   isCollapsed: {
@@ -72,8 +72,6 @@ const { getUser } = usersStore()
 
 const user = computed(() => getUser() || {})
 
-const theme = useStorage('theme', 'light')
-
 const dropdownItems = computed(() => {
   if (!settings.value?.dropdown_items) return []
 
@@ -165,16 +163,4 @@ function getStandardItem(item) {
       }
   }
 }
-
-function toggleTheme() {
-  const currentTheme = document.documentElement.getAttribute('data-theme')
-  theme.value = currentTheme === 'dark' ? 'light' : 'dark'
-  document.documentElement.setAttribute('data-theme', theme.value)
-}
-
-onMounted(() => {
-  if (['light', 'dark'].includes(theme.value)) {
-    document.documentElement.setAttribute('data-theme', theme.value)
-  }
-})
 </script>

frontend/src/stores/theme.js

@@ -0,0 +1,16 @@
+import { useStorage } from '@vueuse/core'
+
+export const theme = useStorage('theme', 'light')
+
+export function toggleTheme() {
+  const currentTheme = document.documentElement.getAttribute('data-theme')
+  theme.value = currentTheme === 'dark' ? 'light' : 'dark'
+  document.documentElement.setAttribute('data-theme', theme.value)
+}
+
+export function setTheme(value) {
+  theme.value = value || theme.value
+  if (['light', 'dark'].includes(theme.value)) {
+    document.documentElement.setAttribute('data-theme', theme.value)
+  }
+}