From d348da770c2a68993d1a40d1c0223e42a681057a Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Sun, 30 Jun 2024 12:49:21 +0530
Subject: [PATCH] fix(theme): force update title attribute on hydration

closes #4004
---
 .../theme-default/components/VPSwitchAppearance.vue       | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/client/theme-default/components/VPSwitchAppearance.vue b/src/client/theme-default/components/VPSwitchAppearance.vue
index 7b13355f0872..2dd062816b95 100644
--- a/src/client/theme-default/components/VPSwitchAppearance.vue
+++ b/src/client/theme-default/components/VPSwitchAppearance.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { inject, computed } from 'vue'
+import { inject, ref, watchPostEffect } from 'vue'
 import { useData } from '../composables/data'
 import VPSwitch from './VPSwitch.vue'
 
@@ -9,8 +9,10 @@ const toggleAppearance = inject('toggle-appearance', () => {
   isDark.value = !isDark.value
 })
 
-const switchTitle = computed(() => {
-  return isDark.value
+const switchTitle = ref('')
+
+watchPostEffect(() => {
+  switchTitle.value = isDark.value
     ? theme.value.lightModeSwitchTitle || 'Switch to light theme'
     : theme.value.darkModeSwitchTitle || 'Switch to dark theme'
 })