From aabee550d27350ce81eaa82971ecac1360a0834a Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 22 Jan 2026 09:39:46 +0700
Subject: [PATCH] Fix theme application - use cupcake instead of removing
 data-theme

---
 app/components/navigation/MainNavigation.vue |  2 +-
 app/layouts/topnav.vue                       | 16 ++++++----------
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index 5ab5f48..bfc4297 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -157,7 +157,7 @@ const props = defineProps<{
   userAvatarSvg?: string
   userName?: string
   userInitials?: string
-  theme?: 'default' | 'night'
+  theme?: 'cupcake' | 'night'
   userData?: {
     id?: string
     activeTeam?: { name?: string; teamType?: string }
diff --git a/app/layouts/topnav.vue b/app/layouts/topnav.vue
index 0455f4d..d5e52ce 100644
--- a/app/layouts/topnav.vue
+++ b/app/layouts/topnav.vue
@@ -45,7 +45,7 @@ const route = useRoute()
 const { headerOffset, isCollapsed } = useScrollCollapse(118)
 
 // Theme state
-const theme = useState<'default' | 'night'>('theme', () => 'default')
+const theme = useState<'cupcake' | 'night'>('theme', () => 'cupcake')
 
 // User data state (shared across layouts)
 const userData = useState<{
@@ -184,21 +184,17 @@ const onClickSignOut = () => {
   signOut(siteUrl)
 }
 
-const applyTheme = (value: 'default' | 'night') => {
+const applyTheme = (value: 'cupcake' | 'night') => {
   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)
   }
 }
 
 onMounted(() => {
   const stored = import.meta.client ? localStorage.getItem('theme') : null
-  if (stored === 'night' || stored === 'default') {
-    theme.value = stored
+  if (stored === 'night' || stored === 'cupcake') {
+    theme.value = stored as 'cupcake' | 'night'
   }
   applyTheme(theme.value)
 })
@@ -206,6 +202,6 @@ onMounted(() => {
 watch(theme, (value) => applyTheme(value))
 
 const toggleTheme = () => {
-  theme.value = theme.value === 'night' ? 'default' : 'night'
+  theme.value = theme.value === 'night' ? 'cupcake' : 'night'
 }
 </script>