fix: first time toggling of the theme button

Author: NamesMT

apps/frontend/app/components/chat/ChatSidebar.vue

@@ -160,9 +160,9 @@ const [DefineThreadLiItem, ReuseThreadLiItem] = createReusableTemplate<{ thread:
       <div class="absolute right-3 top-3">
         <Button
           variant="ghost" size="icon" class="size-7"
-          @click="colorMode.preference = (colorMode.preference === 'dark') ? 'light' : 'dark'"
+          @click="colorMode.preference = (colorMode.value === 'dark') ? 'light' : 'dark'"
         >
-          <div>{{ colorMode.preference === 'dark' ? '🌙' : '🌞' }}</div>
+          <div>{{ colorMode.value === 'dark' ? '🌙' : '🌞' }}</div>
         </Button>
       </div>
 

apps/frontend/app/pages/index.vue

@@ -71,7 +71,7 @@ const { isPending, isError, data, error } = useQuery({
             <template #fallback>
               <Button>...</Button>
             </template>
-            <Button @pointerdown="colorMode.preference = (colorMode.preference !== 'dark') ? 'dark' : 'light'">
+            <Button @pointerdown="colorMode.preference = (colorMode.value !== 'dark') ? 'dark' : 'light'">
               {{ colorMode.preference }}
             </Button>
           </ClientOnly>