fix(stage-tamagotchi): desktop chat window not respective dark theme (#744)

apps/stage-tamagotchi/src/renderer/App.vue

@@ -3,25 +3,34 @@ import { defineInvoke, defineInvokeHandler } from '@moeru/eventa'
 import { useDisplayModelsStore } from '@proj-airi/stage-ui/stores/display-models'
 import { useOnboardingStore } from '@proj-airi/stage-ui/stores/onboarding'
 import { useSettings } from '@proj-airi/stage-ui/stores/settings'
+import { useDark } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { onMounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { RouterView, useRouter } from 'vue-router'
+import { RouterView, useRoute, useRouter } from 'vue-router'
 
 import { electronOpenSettings, electronStartTrackMousePosition } from '../shared/eventa'
 import { useElectronEventaContext } from './composables/electron-vueuse'
+import { themeColorFromValue, useThemeColor } from './composables/theme-color'
 
+const dark = useDark({ disableTransition: false })
 const i18n = useI18n()
 const displayModelsStore = useDisplayModelsStore()
 const settingsStore = useSettings()
 const { language, themeColorsHue, themeColorsHueDynamic } = storeToRefs(settingsStore)
 const onboardingStore = useOnboardingStore()
 const router = useRouter()
+const route = useRoute()
 
 watch(language, () => {
   i18n.locale.value = language.value
 })
 
+const { updateThemeColor } = useThemeColor(themeColorFromValue({ light: 'rgb(255 255 255)', dark: 'rgb(18 18 18)' }))
+watch(dark, () => updateThemeColor(), { immediate: true })
+watch(route, () => updateThemeColor(), { immediate: true })
+onMounted(() => updateThemeColor())
+
 // FIXME: store settings to file
 onMounted(async () => {
   onboardingStore.initializeSetupCheck()

apps/stage-tamagotchi/src/renderer/layouts/settings.vue

@@ -1,18 +1,14 @@
 <script setup lang="ts">
 import { PageHeader } from '@proj-airi/stage-ui/components'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
-import { useDark } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-import { computed, onMounted, watch } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { RouterView, useRoute } from 'vue-router'
 
 import WindowTitleBar from '../components/Window/TitleBar.vue'
 
-import { themeColorFromValue, useThemeColor } from '../composables/theme-color'
-
 const route = useRoute()
-const dark = useDark()
 const { t } = useI18n()
 const providersStore = useProvidersStore()
 const { allProvidersMetadata } = storeToRefs(providersStore)
@@ -128,11 +124,6 @@ const routeHeaderMetadataMap = computed(() => {
 const routeHeaderMetadata = computed(() => {
   return routeHeaderMetadataMap.value[route.path] || routeHeaderMetadataMap.value[`${route.path}/`]
 })
-
-const { updateThemeColor } = useThemeColor(themeColorFromValue({ light: 'rgb(255 255 255)', dark: 'rgb(18 18 18)' }))
-watch(dark, () => updateThemeColor(), { immediate: true })
-watch(route, () => updateThemeColor(), { immediate: true })
-onMounted(() => updateThemeColor())
 </script>
 
 <template>