diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 07088248..d02769fb 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -10,9 +10,8 @@
 <script setup>
 import { Dialogs } from '@/utils/dialogs'
 import { sessionStore as session } from '@/stores/session'
-import { setTheme } from '@/stores/theme'
 import { FrappeUIProvider, setConfig } from 'frappe-ui'
-import { computed, defineAsyncComponent, onMounted } from 'vue'
+import { computed, defineAsyncComponent } from 'vue'
 
 const MobileLayout = defineAsyncComponent(
   () => import('./components/Layouts/MobileLayout.vue'),
@@ -28,8 +27,6 @@ const Layout = computed(() => {
   }
 })
 
-onMounted(() => setTheme())
-
 setConfig('systemTimezone', window.timezone?.system || null)
 setConfig('localTimezone', window.timezone?.user || null)
 </script>
diff --git a/frontend/src/components/UserDropdown.vue b/frontend/src/components/UserDropdown.vue
index e59f319c..05a930ba 100644
--- a/frontend/src/components/UserDropdown.vue
+++ b/frontend/src/components/UserDropdown.vue
@@ -58,8 +58,7 @@ import { getSettings } from '@/stores/settings'
 import { showSettings, isMobileView } from '@/composables/settings'
 import { showAboutModal } from '@/composables/modals'
 import { confirmLoginToFrappeCloud } from '@/composables/frappecloud'
-import { Dropdown } from 'frappe-ui'
-import { theme, toggleTheme } from '@/stores/theme'
+import { Dropdown, useTheme } from 'frappe-ui'
 import { computed, h, markRaw } from 'vue'
 
 const props = defineProps({
@@ -72,6 +71,7 @@ const props = defineProps({
 const { settings, brand } = getSettings()
 const { logout } = sessionStore()
 const { getUser } = usersStore()
+const { currentTheme, toggleTheme } = useTheme()
 
 const user = computed(() => getUser() || {})
 
@@ -134,7 +134,7 @@ function getStandardItem(item) {
       }
     case 'toggle_theme':
       return {
-        icon: theme.value === 'dark' ? 'sun' : item.icon,
+        icon: currentTheme.value === 'dark' ? 'sun' : item.icon,
         label: __(item.label),
         onClick: toggleTheme,
       }
diff --git a/frontend/src/stores/theme.js b/frontend/src/stores/theme.js
deleted file mode 100644
index 50d4e67d..00000000
--- a/frontend/src/stores/theme.js
+++ /dev/null
@@ -1,16 +0,0 @@
-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)
-  }
-}