fix: remove theme management from theme store and update UserDropdown to use useTheme composable from frappe-ui
This commit is contained in:
parent
ed1c448fd7
commit
5eddfbe9b3
@ -10,9 +10,8 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { Dialogs } from '@/utils/dialogs'
|
import { Dialogs } from '@/utils/dialogs'
|
||||||
import { sessionStore as session } from '@/stores/session'
|
import { sessionStore as session } from '@/stores/session'
|
||||||
import { setTheme } from '@/stores/theme'
|
|
||||||
import { FrappeUIProvider, setConfig } from 'frappe-ui'
|
import { FrappeUIProvider, setConfig } from 'frappe-ui'
|
||||||
import { computed, defineAsyncComponent, onMounted } from 'vue'
|
import { computed, defineAsyncComponent } from 'vue'
|
||||||
|
|
||||||
const MobileLayout = defineAsyncComponent(
|
const MobileLayout = defineAsyncComponent(
|
||||||
() => import('./components/Layouts/MobileLayout.vue'),
|
() => import('./components/Layouts/MobileLayout.vue'),
|
||||||
@ -28,8 +27,6 @@ const Layout = computed(() => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
onMounted(() => setTheme())
|
|
||||||
|
|
||||||
setConfig('systemTimezone', window.timezone?.system || null)
|
setConfig('systemTimezone', window.timezone?.system || null)
|
||||||
setConfig('localTimezone', window.timezone?.user || null)
|
setConfig('localTimezone', window.timezone?.user || null)
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -58,8 +58,7 @@ import { getSettings } from '@/stores/settings'
|
|||||||
import { showSettings, isMobileView } from '@/composables/settings'
|
import { showSettings, isMobileView } from '@/composables/settings'
|
||||||
import { showAboutModal } from '@/composables/modals'
|
import { showAboutModal } from '@/composables/modals'
|
||||||
import { confirmLoginToFrappeCloud } from '@/composables/frappecloud'
|
import { confirmLoginToFrappeCloud } from '@/composables/frappecloud'
|
||||||
import { Dropdown } from 'frappe-ui'
|
import { Dropdown, useTheme } from 'frappe-ui'
|
||||||
import { theme, toggleTheme } from '@/stores/theme'
|
|
||||||
import { computed, h, markRaw } from 'vue'
|
import { computed, h, markRaw } from 'vue'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
@ -72,6 +71,7 @@ const props = defineProps({
|
|||||||
const { settings, brand } = getSettings()
|
const { settings, brand } = getSettings()
|
||||||
const { logout } = sessionStore()
|
const { logout } = sessionStore()
|
||||||
const { getUser } = usersStore()
|
const { getUser } = usersStore()
|
||||||
|
const { currentTheme, toggleTheme } = useTheme()
|
||||||
|
|
||||||
const user = computed(() => getUser() || {})
|
const user = computed(() => getUser() || {})
|
||||||
|
|
||||||
@ -134,7 +134,7 @@ function getStandardItem(item) {
|
|||||||
}
|
}
|
||||||
case 'toggle_theme':
|
case 'toggle_theme':
|
||||||
return {
|
return {
|
||||||
icon: theme.value === 'dark' ? 'sun' : item.icon,
|
icon: currentTheme.value === 'dark' ? 'sun' : item.icon,
|
||||||
label: __(item.label),
|
label: __(item.label),
|
||||||
onClick: toggleTheme,
|
onClick: toggleTheme,
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user