docs(fix): out of sync oss header (#805)

Co-authored-by: mdong1909 <mdong1909@users.noreply.github.com>

Author: mdong1909

docs/.vitepress/theme/Layout.vue

@@ -1,39 +1,57 @@
 <script setup lang="ts">
-import OSSHeader from '@voidzero-dev/vitepress-theme/src/components/oss/Header.vue';
+import OSSHeader from '@components/oss/Header.vue';
 import BaseTheme from '@voidzero-dev/vitepress-theme/src/viteplus';
 import { useData } from 'vitepress';
-import { onMounted, watch } from 'vue';
+import { nextTick, watch } from 'vue';
 
 import Footer from './components/Footer.vue';
 import Home from './layouts/Home.vue';
 // import Error404 from "./layouts/Error404.vue";
 
-const { frontmatter } = useData();
+const { frontmatter, isDark } = useData();
 const { Layout: BaseLayout } = BaseTheme;
 
-const ensureHomeLight = () => {
-  if (frontmatter.value?.layout !== 'home' || typeof document === 'undefined') {
+const syncHomeThemeOverride = async () => {
+  if (typeof document === 'undefined') {
     return;
   }
 
-  document.documentElement.classList.remove('dark');
-};
+  const isHome = frontmatter.value?.layout === 'home';
+  const root = document.documentElement;
+
+  if (isHome) {
+    root.setAttribute('data-theme', 'light');
+  } else {
+    root.removeAttribute('data-theme');
+  }
+
+  await nextTick();
+
+  const header = document.querySelector<HTMLElement>('.home-header');
 
-onMounted(() => {
-  ensureHomeLight();
-});
+  if (!header) {
+    return;
+  }
+
+  if (isHome) {
+    header.setAttribute('data-theme', 'light');
+  } else {
+    header.removeAttribute('data-theme');
+  }
+};
 
 watch(
-  () => frontmatter.value?.layout,
+  [() => frontmatter.value?.layout, () => isDark.value],
   () => {
-    ensureHomeLight();
+    void syncHomeThemeOverride();
   },
+  { immediate: true },
 );
 </script>
 
 <template>
   <div v-if="frontmatter.layout === 'home'" class="marketing-layout">
-    <OSSHeader />
+    <OSSHeader class="home-header" />
     <Home />
     <Footer />
   </div>