docs: fix dark mode flashing bug (#1032)

Co-authored-by: Eduardo San Martin Morote <posva13@gmail.com>

diff --git a/packages/docs/.vitepress/components/HomeSponsors.vue b/packages/docs/.vitepress/components/HomeSponsors.vue
index 10f1b90baa7276c89ea144101e9dd2597b79e789..34ae199312c8785834239458292bb0720c387452 100644 (file)
--- a/packages/docs/.vitepress/components/HomeSponsors.vue
+++ b/packages/docs/.vitepress/components/HomeSponsors.vue
@@ -17,21 +17,6 @@
 <script setup>
 import HomeSponsorsGroup from './HomeSponsorsGroup.vue'
 import sponsors from './sponsors.json'
-import { nextTick, onMounted } from 'vue'
-import { darkStorageConfig } from '../theme/dark-theme'
-import { useDark } from '@vueuse/core'
-
-const isDark = useDark(darkStorageConfig)
-
-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/packages/docs/.vitepress/components/ThemeToggle.vue b/packages/docs/.vitepress/components/ThemeToggle.vue
index 87350abb83c372b4fd8c2f477f6a2cb3afb2939e..1723a155861256b600a5f33ac651b21e6cfbfaac 100644 (file)
--- a/packages/docs/.vitepress/components/ThemeToggle.vue
+++ b/packages/docs/.vitepress/components/ThemeToggle.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="icon-button"
+    class="dark-mode-icon-button"
     @click="isDark = !isDark"
     :aria-label="label"
     :title="label"
@@ -69,7 +69,7 @@ const label = computed(() =>
 </script>
 
 <style scoped>
-.icon-button {
+.dark-mode-icon-button {
   display: flex;
   font-size: 1.05rem;
   border: 0;
@@ -78,5 +78,8 @@ const label = computed(() =>
   color: var(--c-text);
   opacity: 0.8;
   cursor: pointer;
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
 }
 </style>

diff --git a/packages/docs/.vitepress/config.js b/packages/docs/.vitepress/config.js
index fd7b00a33f88ae993392bc542f5e492f91c934af..ff8c404869263f0c07457cb5fcb359546d61161d 100644 (file)
--- a/packages/docs/.vitepress/config.js
+++ b/packages/docs/.vitepress/config.js
@@ -22,11 +22,6 @@ const productionHead = [
   ],
 ]
 
-const darkModeFix = require('fs').readFileSync(
-  require('path').resolve(__dirname, './darkModeFix.js'),
-  'utf-8'
-)
-
 /**
  * @type {import('vitepress').UserConfig}
  */
@@ -124,7 +119,6 @@ module.exports = {
       },
     ],
 
-    ['script', {}, darkModeFix],
     ...(isProduction ? productionHead : []),
   ],
 

diff --git a/packages/docs/.vitepress/darkModeFix.js b/packages/docs/.vitepress/darkModeFix.js
deleted file mode 100644 (file)
index 8dbbaf3..0000000
--- a/packages/docs/.vitepress/darkModeFix.js
+++ /dev/null
@@ -1,10 +0,0 @@
-;(() => {
-  const saved = localStorage.getItem('pinia-color-scheme')
-  if (
-    saved === 'auto'
-      ? window.matchMedia(`(prefers-color-scheme: light)`).matches
-      : saved === 'light'
-  ) {
-    document.documentElement.classList.add('light')
-  }
-})()

diff --git a/packages/docs/.vitepress/theme/Layout.ts b/packages/docs/.vitepress/theme/Layout.ts
index 5cb4cc428c64f726444630ccf887b52b43fedd60..2e0dd2f879b1cd6fc6c875142d3d8f3c4fe7f260 100644 (file)
--- a/packages/docs/.vitepress/theme/Layout.ts
+++ b/packages/docs/.vitepress/theme/Layout.ts
@@ -1,32 +1,60 @@
 import Theme from 'vitepress/theme'
-import { h, nextTick } from 'vue'
-import type { FunctionalComponent } from 'vue'
+import { h, defineComponent } from 'vue'
 import sponsors from '../components/sponsors.json'
 import './sponsors.css'
 import { darkStorageConfig } from '../theme/dark-theme'
 import { useDark } from '@vueuse/core'
 
-export const Layout: FunctionalComponent = () => {
-  const isDark = useDark(darkStorageConfig)
-  return 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-top': () =>
-        h('div', { class: 'sponsors sponsors-top' }, [
-          h('span', 'Platinum Sponsors'),
-          ...(sponsors.platinum.length
-            ? sponsors.platinum.map(({ href, imgSrcDark, imgSrcLight, alt }) =>
+export const Layout = defineComponent({
+  name: 'CustomLayout',
+
+  setup() {
+    const isDark = useDark(darkStorageConfig)
+
+    return () =>
+      h(
+        Theme.Layout,
+        {},
+        {
+          'sidebar-top': () =>
+            h('div', { class: 'sponsors sponsors-top' }, [
+              h('span', 'Platinum Sponsors'),
+              ...(sponsors.platinum.length
+                ? sponsors.platinum.map(
+                    ({ href, imgSrcDark, imgSrcLight, alt }) =>
+                      h(
+                        'a',
+                        {
+                          href,
+                          target: '_blank',
+                          rel: 'noopener',
+                        },
+                        [
+                          h('img', {
+                            src: isDark.value ? imgSrcDark : imgSrcLight,
+                            alt,
+                          }),
+                        ]
+                      )
+                  )
+                : [
+                    h(
+                      'a',
+                      {
+                        class: 'become-sponsor',
+                        href: 'https://github.com/sponsors/posva',
+                        target: '_blank',
+                        rel: 'noopener',
+                        alt: 'Your logo here',
+                      },
+                      'Become a Sponsor!'
+                    ),
+                  ]),
+            ]),
+          'sidebar-bottom': () =>
+            h('div', { class: 'sponsors' }, [
+              h('span', 'Sponsors'),
+              ...sponsors.gold.map(({ href, imgSrcDark, imgSrcLight, alt }) =>
                 h(
                   'a',
                   {
@@ -41,38 +69,9 @@ export const Layout: FunctionalComponent = () => {
                     }),
                   ]
                 )
-              )
-            : [
-                h(
-                  'a',
-                  {
-                    class: 'become-sponsor',
-                    href: 'https://github.com/sponsors/posva',
-                    target: '_blank',
-                    rel: 'noopener',
-                    alt: 'Your logo here',
-                  },
-                  'Become a Sponsor!'
-                ),
-              ]),
-        ]),
-      'sidebar-bottom': () =>
-        h('div', { class: 'sponsors' }, [
-          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'
+              ),
+            ]),
+        }
+      )
+  },
+})

diff --git a/packages/docs/.vitepress/theme/index.js b/packages/docs/.vitepress/theme/index.js
index 4a1d56ee121e0e45d5cfd80a38adc71dc0f6b650..7de263897b17ed6583211ebcf25d980f46a7b9f3 100644 (file)
--- a/packages/docs/.vitepress/theme/index.js
+++ b/packages/docs/.vitepress/theme/index.js
@@ -2,7 +2,7 @@ import Theme from 'vitepress/theme'
 import { Layout } from './Layout'
 import './custom.css'
 import './code-theme.css'
-// import { createPinia } from '../../../src'
+// import { createPinia } from '../../../pinia'
 
 /** @type {import('vitepress').Theme} */
 const config = {
@@ -10,9 +10,9 @@ const config = {
 
   Layout,
 
-  enhanceApp({ app }) {
-    // app.use(createPinia())
-  },
+  // enhanceApp({ app }) {
+  // app.use(createPinia())
+  // },
 }
 
 export default config

diff --git a/packages/docs/index.md b/packages/docs/index.md
index 9a39a4fe0a680a654b8eb835319d0a68bda20cce..d4fdd1bf15f748c6116204206d42b75eb3d4eecb 100644 (file)
--- a/packages/docs/index.md
+++ b/packages/docs/index.md
@@ -23,13 +23,13 @@ features:
 footer: MIT Licensed | Copyright © 2019-present Eduardo San Martin Morote
 ---
 
-<!-- <ThemeToggle/> -->
+<ThemeToggle/>
 <!-- <TestStore/> -->
 
 <HomeSponsors />
 
 <script setup>
 import HomeSponsors from './.vitepress/components/HomeSponsors.vue'
-// import ThemeToggle from './.vitepress/components/ThemeToggle.vue'
+import ThemeToggle from './.vitepress/components/ThemeToggle.vue'
 // import TestStore from './.vitepress/components/TestStore.vue'
 </script>

diff --git a/packages/docs/vite.config.ts b/packages/docs/vite.config.ts
index a2ab4aa33b83ee864c1f82828f0966cb24a33b78..a084967b65d013c700f3693983157b7c8db70605 100644 (file)
--- a/packages/docs/vite.config.ts
+++ b/packages/docs/vite.config.ts
@@ -32,10 +32,7 @@ function copyPiniaPlugin(): Plugin {
   return {
     name: 'copy-pinia',
     async generateBundle() {
-      const filePath = path.resolve(
-        __dirname,
-        '../pinia/dist/pinia.esm-bundler.js'
-      )
+      const filePath = path.resolve(__dirname, '../pinia/dist/pinia.mjs')
 
       // throws if file doesn't exist
       await fs.access(filePath)