docs: dark mode not applied properly in landing page (#2093)

Author: jay-es

.vitepress/theme/styles/landing.css

@@ -4,17 +4,11 @@
 
 html:has(.landing) {
   --vp-c-bg: #101010;
-
   background-color: #101010;
-
-  body {
-    background-color: #101010;
-  }
 }
 
 .landing {
   overflow-x: hidden;
-  background-color: #101010;
 
   * {
     -webkit-font-smoothing: antialiased !important;

index.md

@@ -1,6 +1,8 @@
 ---
 title: Vite
 titleTemplate: 次世代フロントエンドツール
+# add `dark` here to apply dark mode on initial load,
+# since `onMounted` doesn't run during SSR
 pageClass: landing dark
 
 layout: home
@@ -10,6 +12,9 @@ markdownStyles: false
 ---
 
 <script setup>
+import { useData } from 'vitepress'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
 import Hero from '.vitepress/theme/components/landing/1. hero-section/HeroSection.vue'
 import FeatureSection from './.vitepress/theme/components/landing/2. feature-section/FeatureSection.vue'
 import FrameworksSection from './.vitepress/theme/components/landing/3. frameworks-section/FrameworksSection.vue'
@@ -24,6 +29,16 @@ import FeatureFlexiblePlugins from './.vitepress/theme/components/landing/2. fea
 import FeatureTypedAPI from './.vitepress/theme/components/landing/2. feature-section/FeatureTypedAPI.vue'
 import FeatureSSRSupport from './.vitepress/theme/components/landing/2. feature-section/FeatureSSRSupport.vue'
 import FeatureCI from './.vitepress/theme/components/landing/2. feature-section/FeatureCI.vue'
+
+const { isDark } = useData()
+
+onMounted(() => {
+  document.documentElement.classList.add('dark')
+})
+
+onBeforeUnmount(() => {
+  document.documentElement.classList.toggle('dark', isDark.value)
+})
 </script>
 
 <div class="VPHome">