docs: fix color of logos

diff --git a/docs/.vitepress/components/HomeSponsors.vue b/docs/.vitepress/components/HomeSponsors.vue
index 3523659cf91e5d975708b93d45c8e49f602ed4e8..0306730efe2b9e329b7f2521f24593035dd826cc 100644 (file)
--- a/docs/.vitepress/components/HomeSponsors.vue
+++ b/docs/.vitepress/components/HomeSponsors.vue
@@ -19,6 +19,18 @@
 <script setup>
 import HomeSponsorsGroup from './HomeSponsorsGroup.vue'
 import sponsors from './sponsors.json'
+import { nextTick, onMounted } from 'vue'
+import { isDark } from '../theme/dark-theme'
+
+onMounted(() => {
+  // wait to ticks to fix the problem of SSR with no color scheme
+  nextTick(() => {
+    isDark.value = !isDark.value
+    return nextTick()
+  }).then(() => {
+    isDark.value = !isDark.value
+  })
+})
 </script>
 
 <style scoped>

diff --git a/docs/.vitepress/theme/Layout.ts b/docs/.vitepress/theme/Layout.ts
index 0da48b33c8ceeb687763d7ede52b108635126ca1..05b4bba4790a6016ac8ca7dc218fb1956c6c25f4 100644 (file)
--- a/docs/.vitepress/theme/Layout.ts
+++ b/docs/.vitepress/theme/Layout.ts
@@ -1,35 +1,49 @@
 import Theme from 'vitepress/theme'
-import { h } from 'vue'
+import { h, nextTick } from 'vue'
 import type { FunctionalComponent } from 'vue'
 import sponsors from '../components/sponsors.json'
 import './sponsors.css'
 import { isDark } from './dark-theme'
 
 export const Layout: FunctionalComponent = () =>
-  h(Theme.Layout, null, {
-    'sidebar-bottom': () =>
-      h('div', { class: 'sponsors' }, [
-        h(
-          'a',
-          {
-            href: 'https://github.com/sponsors/posva',
-            target: '_blank',
-            rel: 'noopener',
-          },
-          [h('span', 'Sponsors')]
-        ),
-        ...sponsors.gold.map(({ href, imgSrcDark, imgSrcLight, alt }) =>
+  h(
+    Theme.Layout,
+    {
+      onVnodeMounted() {
+        // wait to ticks to fix the problem of SSR with no color scheme
+        nextTick(() => {
+          isDark.value = !isDark.value
+          return nextTick()
+        }).then(() => {
+          isDark.value = !isDark.value
+        })
+      },
+    },
+    {
+      'sidebar-bottom': () =>
+        h('div', { class: 'sponsors' }, [
           h(
             'a',
             {
-              href,
+              href: 'https://github.com/sponsors/posva',
               target: '_blank',
               rel: 'noopener',
             },
-            [h('img', { src: isDark.value ? imgSrcDark : imgSrcLight, alt })]
-          )
-        ),
-      ]),
-  })
+            [h('span', 'Sponsors')]
+          ),
+          ...sponsors.gold.map(({ href, imgSrcDark, imgSrcLight, alt }) =>
+            h(
+              'a',
+              {
+                href,
+                target: '_blank',
+                rel: 'noopener',
+              },
+              [h('img', { src: isDark.value ? imgSrcDark : imgSrcLight, alt })]
+            )
+          ),
+        ]),
+    }
+  )
 
 Layout.displayName = 'CustomLayout'