Skip to content

Commit ec9cdc4

Browse files
theoephraimposva
theoephraim
and
posva
authored
docs: fix dark mode flashing bug (#1032)
Co-authored-by: Eduardo San Martin Morote <[email protected]>
1 parent d72b964 commit ec9cdc4

File tree

8 files changed

+69
-101
lines changed

8 files changed

+69
-101
lines changed

‎packages/docs/.vitepress/components/HomeSponsors.vue

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -17,21 +17,6 @@
1717
<script setup>
1818
import HomeSponsorsGroup from './HomeSponsorsGroup.vue'
1919
import sponsors from './sponsors.json'
20-
import { nextTick, onMounted } from 'vue'
21-
import { darkStorageConfig } from '../theme/dark-theme'
22-
import { useDark } from '@vueuse/core'
23-
24-
const isDark = useDark(darkStorageConfig)
25-
26-
onMounted(() => {
27-
// wait to ticks to fix the problem of SSR with no color scheme
28-
nextTick(() => {
29-
isDark.value = !isDark.value
30-
return nextTick()
31-
}).then(() => {
32-
isDark.value = !isDark.value
33-
})
34-
})
3520
</script>
3621

3722
<style scoped>

‎packages/docs/.vitepress/components/ThemeToggle.vue

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<button
3-
class="icon-button"
3+
class="dark-mode-icon-button"
44
@click="isDark = !isDark"
55
:aria-label="label"
66
:title="label"
@@ -69,7 +69,7 @@ const label = computed(() =>
6969
</script>
7070

7171
<style scoped>
72-
.icon-button {
72+
.dark-mode-icon-button {
7373
display: flex;
7474
font-size: 1.05rem;
7575
border: 0;
@@ -78,5 +78,8 @@ const label = computed(() =>
7878
color: var(--c-text);
7979
opacity: 0.8;
8080
cursor: pointer;
81+
position: fixed;
82+
bottom: 10px;
83+
left: 10px;
8184
}
8285
</style>

‎packages/docs/.vitepress/config.js

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,6 @@ const productionHead = [
2222
],
2323
]
2424

25-
const darkModeFix = require('fs').readFileSync(
26-
require('path').resolve(__dirname, './darkModeFix.js'),
27-
'utf-8'
28-
)
29-
3025
/**
3126
* @type {import('vitepress').UserConfig}
3227
*/
@@ -124,7 +119,6 @@ module.exports = {
124119
},
125120
],
126121

127-
['script', {}, darkModeFix],
128122
...(isProduction ? productionHead : []),
129123
],
130124

‎packages/docs/.vitepress/darkModeFix.js

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎packages/docs/.vitepress/theme/Layout.ts

Lines changed: 57 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,60 @@
11
import Theme from 'vitepress/theme'
2-
import { h, nextTick } from 'vue'
3-
import type { FunctionalComponent } from 'vue'
2+
import { h, defineComponent } from 'vue'
43
import sponsors from '../components/sponsors.json'
54
import './sponsors.css'
65
import { darkStorageConfig } from '../theme/dark-theme'
76
import { useDark } from '@vueuse/core'
87

9-
export const Layout: FunctionalComponent = () => {
10-
const isDark = useDark(darkStorageConfig)
11-
return h(
12-
Theme.Layout,
13-
{
14-
onVnodeMounted() {
15-
// wait to ticks to fix the problem of SSR with no color scheme
16-
nextTick(() => {
17-
isDark.value = !isDark.value
18-
return nextTick()
19-
}).then(() => {
20-
isDark.value = !isDark.value
21-
})
22-
},
23-
},
24-
{
25-
'sidebar-top': () =>
26-
h('div', { class: 'sponsors sponsors-top' }, [
27-
h('span', 'Platinum Sponsors'),
28-
...(sponsors.platinum.length
29-
? sponsors.platinum.map(({ href, imgSrcDark, imgSrcLight, alt }) =>
8+
export const Layout = defineComponent({
9+
name: 'CustomLayout',
10+
11+
setup() {
12+
const isDark = useDark(darkStorageConfig)
13+
14+
return () =>
15+
h(
16+
Theme.Layout,
17+
{},
18+
{
19+
'sidebar-top': () =>
20+
h('div', { class: 'sponsors sponsors-top' }, [
21+
h('span', 'Platinum Sponsors'),
22+
...(sponsors.platinum.length
23+
? sponsors.platinum.map(
24+
({ href, imgSrcDark, imgSrcLight, alt }) =>
25+
h(
26+
'a',
27+
{
28+
href,
29+
target: '_blank',
30+
rel: 'noopener',
31+
},
32+
[
33+
h('img', {
34+
src: isDark.value ? imgSrcDark : imgSrcLight,
35+
alt,
36+
}),
37+
]
38+
)
39+
)
40+
: [
41+
h(
42+
'a',
43+
{
44+
class: 'become-sponsor',
45+
href: 'https://github.com/sponsors/posva',
46+
target: '_blank',
47+
rel: 'noopener',
48+
alt: 'Your logo here',
49+
},
50+
'Become a Sponsor!'
51+
),
52+
]),
53+
]),
54+
'sidebar-bottom': () =>
55+
h('div', { class: 'sponsors' }, [
56+
h('span', 'Sponsors'),
57+
...sponsors.gold.map(({ href, imgSrcDark, imgSrcLight, alt }) =>
3058
h(
3159
'a',
3260
{
@@ -41,38 +69,9 @@ export const Layout: FunctionalComponent = () => {
4169
}),
4270
]
4371
)
44-
)
45-
: [
46-
h(
47-
'a',
48-
{
49-
class: 'become-sponsor',
50-
href: 'https://github.com/sponsors/posva',
51-
target: '_blank',
52-
rel: 'noopener',
53-
alt: 'Your logo here',
54-
},
55-
'Become a Sponsor!'
56-
),
57-
]),
58-
]),
59-
'sidebar-bottom': () =>
60-
h('div', { class: 'sponsors' }, [
61-
h('span', 'Sponsors'),
62-
...sponsors.gold.map(({ href, imgSrcDark, imgSrcLight, alt }) =>
63-
h(
64-
'a',
65-
{
66-
href,
67-
target: '_blank',
68-
rel: 'noopener',
69-
},
70-
[h('img', { src: isDark.value ? imgSrcDark : imgSrcLight, alt })]
71-
)
72-
),
73-
]),
74-
}
75-
)
76-
}
77-
78-
Layout.displayName = 'CustomLayout'
72+
),
73+
]),
74+
}
75+
)
76+
},
77+
})

‎packages/docs/.vitepress/theme/index.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@ import Theme from 'vitepress/theme'
22
import { Layout } from './Layout'
33
import './custom.css'
44
import './code-theme.css'
5-
// import { createPinia } from '../../../src'
5+
// import { createPinia } from '../../../pinia'
66

77
/** @type {import('vitepress').Theme} */
88
const config = {
99
...Theme,
1010

1111
Layout,
1212

13-
enhanceApp({ app }) {
14-
// app.use(createPinia())
15-
},
13+
// enhanceApp({ app }) {
14+
// app.use(createPinia())
15+
// },
1616
}
1717

1818
export default config

‎packages/docs/index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,13 @@ features:
2323
footer: MIT Licensed | Copyright © 2019-present Eduardo San Martin Morote
2424
---
2525

26-
<!-- <ThemeToggle/> -->
26+
<ThemeToggle/>
2727
<!-- <TestStore/> -->
2828

2929
<HomeSponsors />
3030

3131
<script setup>
3232
import HomeSponsors from './.vitepress/components/HomeSponsors.vue'
33-
// import ThemeToggle from './.vitepress/components/ThemeToggle.vue'
33+
import ThemeToggle from './.vitepress/components/ThemeToggle.vue'
3434
// import TestStore from './.vitepress/components/TestStore.vue'
3535
</script>

‎packages/docs/vite.config.ts

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,7 @@ function copyPiniaPlugin(): Plugin {
3232
return {
3333
name: 'copy-pinia',
3434
async generateBundle() {
35-
const filePath = path.resolve(
36-
__dirname,
37-
'../pinia/dist/pinia.esm-bundler.js'
38-
)
35+
const filePath = path.resolve(__dirname, '../pinia/dist/pinia.mjs')
3936

4037
// throws if file doesn't exist
4138
await fs.access(filePath)

0 commit comments

Comments
 (0)