fix: remove theme management from theme store and update UserDropdown to use useTheme composable from frappe-ui

This commit is contained in:
Shariq Ansari 2025-09-03 15:29:30 +05:30
parent ed1c448fd7
commit 5eddfbe9b3
3 changed files with 4 additions and 23 deletions

View File

@ -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>

View File

@ -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,
}

View File

@ -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)
}
}