From cc50096f52c4b3da368150ee2cc88ea5831c4d31 Mon Sep 17 00:00:00 2001
From: Jun Shindo <46585162+jay-es@users.noreply.github.com>
Date: Mon, 28 Jul 2025 20:29:18 +0900
Subject: [PATCH] docs: dark mode not applied properly in landing page

---
 .vitepress/theme/styles/landing.css |  6 ------
 index.md                            | 15 +++++++++++++++
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/.vitepress/theme/styles/landing.css b/.vitepress/theme/styles/landing.css
index fa48359e..8dc44bc3 100644
--- a/.vitepress/theme/styles/landing.css
+++ b/.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;
diff --git a/index.md b/index.md
index 3bac83f0..9d46b028 100644
--- a/index.md
+++ b/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">