Fix theme application - use cupcake instead of removing data-theme
All checks were successful
Build Docker Image / build (push) Successful in 3m13s
All checks were successful
Build Docker Image / build (push) Successful in 3m13s
This commit is contained in:
@@ -157,7 +157,7 @@ const props = defineProps<{
|
|||||||
userAvatarSvg?: string
|
userAvatarSvg?: string
|
||||||
userName?: string
|
userName?: string
|
||||||
userInitials?: string
|
userInitials?: string
|
||||||
theme?: 'default' | 'night'
|
theme?: 'cupcake' | 'night'
|
||||||
userData?: {
|
userData?: {
|
||||||
id?: string
|
id?: string
|
||||||
activeTeam?: { name?: string; teamType?: string }
|
activeTeam?: { name?: string; teamType?: string }
|
||||||
|
|||||||
@@ -45,7 +45,7 @@ const route = useRoute()
|
|||||||
const { headerOffset, isCollapsed } = useScrollCollapse(118)
|
const { headerOffset, isCollapsed } = useScrollCollapse(118)
|
||||||
|
|
||||||
// Theme state
|
// Theme state
|
||||||
const theme = useState<'default' | 'night'>('theme', () => 'default')
|
const theme = useState<'cupcake' | 'night'>('theme', () => 'cupcake')
|
||||||
|
|
||||||
// User data state (shared across layouts)
|
// User data state (shared across layouts)
|
||||||
const userData = useState<{
|
const userData = useState<{
|
||||||
@@ -184,21 +184,17 @@ const onClickSignOut = () => {
|
|||||||
signOut(siteUrl)
|
signOut(siteUrl)
|
||||||
}
|
}
|
||||||
|
|
||||||
const applyTheme = (value: 'default' | 'night') => {
|
const applyTheme = (value: 'cupcake' | 'night') => {
|
||||||
if (import.meta.client) {
|
if (import.meta.client) {
|
||||||
if (value === 'default') {
|
|
||||||
document.documentElement.removeAttribute('data-theme')
|
|
||||||
} else {
|
|
||||||
document.documentElement.setAttribute('data-theme', value)
|
document.documentElement.setAttribute('data-theme', value)
|
||||||
}
|
|
||||||
localStorage.setItem('theme', value)
|
localStorage.setItem('theme', value)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
const stored = import.meta.client ? localStorage.getItem('theme') : null
|
const stored = import.meta.client ? localStorage.getItem('theme') : null
|
||||||
if (stored === 'night' || stored === 'default') {
|
if (stored === 'night' || stored === 'cupcake') {
|
||||||
theme.value = stored
|
theme.value = stored as 'cupcake' | 'night'
|
||||||
}
|
}
|
||||||
applyTheme(theme.value)
|
applyTheme(theme.value)
|
||||||
})
|
})
|
||||||
@@ -206,6 +202,6 @@ onMounted(() => {
|
|||||||
watch(theme, (value) => applyTheme(value))
|
watch(theme, (value) => applyTheme(value))
|
||||||
|
|
||||||
const toggleTheme = () => {
|
const toggleTheme = () => {
|
||||||
theme.value = theme.value === 'night' ? 'default' : 'night'
|
theme.value = theme.value === 'night' ? 'cupcake' : 'night'
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user