mirror of
https://github.com/wavetermdev/docusaurus-og.git
synced 2026-08-05 13:46:35 -07:00
fix: prevent screen flash by loading css vars for both dark and light theme in initial load
This commit is contained in:
Hossein Mehrabi
@@ -20,7 +20,7 @@
|
||||
"prepublishOnly": "yarn clean && yarn build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@acid-info/lsd-react": "^0.1.0-alpha.13",
|
||||
"@acid-info/lsd-react": "^0.1.0-alpha.15",
|
||||
"@docusaurus/core": "^2.4.1",
|
||||
"@docusaurus/mdx-loader": "^2.4.1",
|
||||
"@docusaurus/module-type-aliases": "^2.4.1",
|
||||
|
||||
@@ -1,10 +1,15 @@
|
||||
import { defaultThemes, ThemeProvider } from '@acid-info/lsd-react'
|
||||
import {
|
||||
defaultThemes,
|
||||
Theme,
|
||||
ThemeProvider as LSDThemeProvider,
|
||||
} from '@acid-info/lsd-react'
|
||||
import { useActivePlugin } from '@docusaurus/plugin-content-docs/lib/client/index.js'
|
||||
import {
|
||||
ColorModeProvider,
|
||||
useColorMode,
|
||||
} from '@docusaurus/theme-common/internal'
|
||||
import React from 'react'
|
||||
import { css, Global } from '@emotion/react'
|
||||
import React, { useMemo } from 'react'
|
||||
import { darkTheme, lightTheme } from '../lib/themes'
|
||||
import { useDocThemeOptions } from '../lib/useThemeOptions'
|
||||
import styles from './style.module.css'
|
||||
@@ -18,16 +23,46 @@ const useTheme = () => {
|
||||
const colorMode = useColorMode()
|
||||
const activePlugin = useActivePlugin()
|
||||
|
||||
return (activePlugin ? docThemes : defaultThemes)[colorMode.colorMode]
|
||||
const themes = activePlugin ? docThemes : defaultThemes
|
||||
|
||||
return {
|
||||
dark: themes.dark,
|
||||
light: themes.light,
|
||||
current: themes[colorMode.colorMode],
|
||||
colorMode: colorMode.colorMode,
|
||||
}
|
||||
}
|
||||
|
||||
const useThemeCssVars = (theme: Theme, light: boolean = false) =>
|
||||
useMemo(
|
||||
() => css`
|
||||
[data-theme='${light ? 'light' : 'dark'}'] {
|
||||
${theme.cssVars}
|
||||
}
|
||||
`,
|
||||
[theme],
|
||||
)
|
||||
|
||||
const ThemeProvider: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
|
||||
const theme = useTheme()
|
||||
const darkCssVars = useThemeCssVars(theme.dark, false)
|
||||
const lightCssVars = useThemeCssVars(theme.light, true)
|
||||
|
||||
return (
|
||||
<LSDThemeProvider theme={theme.current} injectCssVars={false}>
|
||||
{children}
|
||||
<Global styles={darkCssVars} />
|
||||
<Global styles={lightCssVars} />
|
||||
</LSDThemeProvider>
|
||||
)
|
||||
}
|
||||
|
||||
const Content = ({ children }) => {
|
||||
const theme = useTheme()
|
||||
const options = useDocThemeOptions()
|
||||
const hideDocSidebar = options?.sidebar?.hide
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
<ThemeProvider>
|
||||
<div className={styles.root} data-hidden-doc-sidebar={hideDocSidebar}>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
# yarn lockfile v1
|
||||
|
||||
|
||||
"@acid-info/lsd-react@^0.1.0-alpha.13":
|
||||
version "0.1.0-alpha.13"
|
||||
resolved "https://registry.yarnpkg.com/@acid-info/lsd-react/-/lsd-react-0.1.0-alpha.13.tgz#83a947aef6bf0597bb94389382bce72eda9d262e"
|
||||
integrity sha512-bEtCygGvEabxr7a/0s2n9LLbs7RUY5YXFIEzxKeDH52UNhzLODY6hpOELWfpDxfd2Q0yxnMKSaG+yI7/FqjnlA==
|
||||
"@acid-info/lsd-react@^0.1.0-alpha.15":
|
||||
version "0.1.0-alpha.15"
|
||||
resolved "https://registry.yarnpkg.com/@acid-info/lsd-react/-/lsd-react-0.1.0-alpha.15.tgz#28821fd1ca4150b836c1401db5b683eeb0f281ae"
|
||||
integrity sha512-e3Vi43H+dw/l1Yo/Ktj83FWCBqiREuCiOrQYKAs6BFRERny4Y+TIsoe86V0gETQyGHXX3YJJYOTaXwCZH7oNRg==
|
||||
dependencies:
|
||||
"@emotion/react" "^11.10.5"
|
||||
"@emotion/styled" "^11.10.5"
|
||||
@@ -3399,11 +3399,6 @@
|
||||
resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
|
||||
integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
|
||||
|
||||
"@types/katex@^0.11.0":
|
||||
version "0.11.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/katex/-/katex-0.11.1.tgz#34de04477dcf79e2ef6c8d23b41a3d81f9ebeaf5"
|
||||
integrity sha512-DUlIj2nk0YnJdlWgsFuVKcX27MLW0KbKmGVoUHmFr+74FYYNUDAaj9ZqTADvsbE8rfxuVmSFc7KczYn5Y09ozg==
|
||||
|
||||
"@types/lodash@^4.14.186":
|
||||
version "4.14.195"
|
||||
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.195.tgz#bafc975b252eb6cea78882ce8a7b6bf22a6de632"
|
||||
@@ -5587,7 +5582,7 @@ commander@^6.2.0:
|
||||
resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
|
||||
integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
|
||||
|
||||
commander@^8.0.0, commander@^8.3.0:
|
||||
commander@^8.3.0:
|
||||
version "8.3.0"
|
||||
resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
|
||||
integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
|
||||
@@ -9002,11 +8997,6 @@ hast-util-from-parse5@^6.0.0:
|
||||
vfile-location "^3.2.0"
|
||||
web-namespaces "^1.0.0"
|
||||
|
||||
hast-util-is-element@1.1.0, hast-util-is-element@^1.0.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/hast-util-is-element/-/hast-util-is-element-1.1.0.tgz#3b3ed5159a2707c6137b48637fbfe068e175a425"
|
||||
integrity sha512-oUmNua0bFbdrD/ELDSSEadRVtWZOf3iF6Lbv81naqsIV99RnSCieTbWuWCY8BAeEfKJTKl0gRdokv+dELutHGQ==
|
||||
|
||||
hast-util-parse-selector@^2.0.0:
|
||||
version "2.2.5"
|
||||
resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz#d57c23f4da16ae3c63b3b6ca4616683313499c3a"
|
||||
@@ -9039,15 +9029,6 @@ hast-util-to-parse5@^6.0.0:
|
||||
xtend "^4.0.0"
|
||||
zwitch "^1.0.0"
|
||||
|
||||
hast-util-to-text@^2.0.0:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/hast-util-to-text/-/hast-util-to-text-2.0.1.tgz#04f2e065642a0edb08341976084aa217624a0f8b"
|
||||
integrity sha512-8nsgCARfs6VkwH2jJU9b8LNTuR4700na+0h3PqCaEk4MAnMDeu5P0tP8mjk9LLNGxIeQRLbiDbZVw6rku+pYsQ==
|
||||
dependencies:
|
||||
hast-util-is-element "^1.0.0"
|
||||
repeat-string "^1.0.0"
|
||||
unist-util-find-after "^3.0.0"
|
||||
|
||||
hastscript@^6.0.0:
|
||||
version "6.0.0"
|
||||
resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-6.0.0.tgz#e8768d7eac56c3fdeac8a92830d58e811e5bf640"
|
||||
@@ -10859,13 +10840,6 @@ just-diff@^6.0.0:
|
||||
resolved "https://registry.yarnpkg.com/just-diff/-/just-diff-6.0.2.tgz#03b65908543ac0521caf6d8eb85035f7d27ea285"
|
||||
integrity sha512-S59eriX5u3/QhMNq3v/gm8Kd0w8OS6Tz2FS1NG4blv+z0MuQcBRJyFWjdovM0Rad4/P4aUPFtnkNjMjyMlMSYA==
|
||||
|
||||
katex@^0.13.0:
|
||||
version "0.13.24"
|
||||
resolved "https://registry.yarnpkg.com/katex/-/katex-0.13.24.tgz#fe55455eb455698cb24b911a353d16a3c855d905"
|
||||
integrity sha512-jZxYuKCma3VS5UuxOx/rFV1QyGSl3Uy/i0kTJF3HgQ5xMinCQVF8Zd4bMY/9aI9b9A2pjIBOsjSSm68ykTAr8w==
|
||||
dependencies:
|
||||
commander "^8.0.0"
|
||||
|
||||
keyv@^3.0.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.1.0.tgz#ecc228486f69991e49e9476485a5be1e8fc5c4d9"
|
||||
@@ -14405,26 +14379,6 @@ regjsparser@^0.9.1:
|
||||
dependencies:
|
||||
jsesc "~0.5.0"
|
||||
|
||||
rehype-katex@5:
|
||||
version "5.0.0"
|
||||
resolved "https://registry.yarnpkg.com/rehype-katex/-/rehype-katex-5.0.0.tgz#b556f24fde918f28ba1cb642ea71c7e82f3373d7"
|
||||
integrity sha512-ksSuEKCql/IiIadOHiKRMjypva9BLhuwQNascMqaoGLDVd0k2NlE2wMvgZ3rpItzRKCd6vs8s7MFbb8pcR0AEg==
|
||||
dependencies:
|
||||
"@types/katex" "^0.11.0"
|
||||
hast-util-to-text "^2.0.0"
|
||||
katex "^0.13.0"
|
||||
rehype-parse "^7.0.0"
|
||||
unified "^9.0.0"
|
||||
unist-util-visit "^2.0.0"
|
||||
|
||||
rehype-parse@^7.0.0:
|
||||
version "7.0.1"
|
||||
resolved "https://registry.yarnpkg.com/rehype-parse/-/rehype-parse-7.0.1.tgz#58900f6702b56767814afc2a9efa2d42b1c90c57"
|
||||
integrity sha512-fOiR9a9xH+Le19i4fGzIEowAbwG7idy2Jzs4mOrFWBSJ0sNUgy0ev871dwWnbOo371SjgjG4pwzrbgSVrKxecw==
|
||||
dependencies:
|
||||
hast-util-from-parse5 "^6.0.0"
|
||||
parse5 "^6.0.0"
|
||||
|
||||
relateurl@^0.2.7:
|
||||
version "0.2.7"
|
||||
resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
|
||||
@@ -14444,11 +14398,6 @@ remark-footnotes@2.0.0:
|
||||
resolved "https://registry.yarnpkg.com/remark-footnotes/-/remark-footnotes-2.0.0.tgz#9001c4c2ffebba55695d2dd80ffb8b82f7e6303f"
|
||||
integrity sha512-3Clt8ZMH75Ayjp9q4CorNeyjwIxHFcTkaektplKGl2A1jNGEUey8cKL0ZC5vJwfcD5GFGsNLImLG/NGzWIzoMQ==
|
||||
|
||||
remark-math@3:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/remark-math/-/remark-math-3.0.1.tgz#85a02a15b15cad34b89a27244d4887b3a95185bb"
|
||||
integrity sha512-epT77R/HK0x7NqrWHdSV75uNLwn8g9qTyMqCRCDujL0vj/6T6+yhdrR7mjELWtkse+Fw02kijAaBuVcHBor1+Q==
|
||||
|
||||
remark-mdx@1.6.22:
|
||||
version "1.6.22"
|
||||
resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-1.6.22.tgz#06a8dab07dcfdd57f3373af7f86bd0e992108bbd"
|
||||
@@ -14530,7 +14479,7 @@ repeat-element@^1.1.2:
|
||||
resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.4.tgz#be681520847ab58c7568ac75fbfad28ed42d39e9"
|
||||
integrity sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==
|
||||
|
||||
repeat-string@^1.0.0, repeat-string@^1.5.4, repeat-string@^1.6.1:
|
||||
repeat-string@^1.5.4, repeat-string@^1.6.1:
|
||||
version "1.6.1"
|
||||
resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
|
||||
integrity sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==
|
||||
@@ -16799,7 +16748,7 @@ unified@9.2.0:
|
||||
trough "^1.0.0"
|
||||
vfile "^4.0.0"
|
||||
|
||||
unified@^9.0.0, unified@^9.2.2:
|
||||
unified@^9.2.2:
|
||||
version "9.2.2"
|
||||
resolved "https://registry.yarnpkg.com/unified/-/unified-9.2.2.tgz#67649a1abfc3ab85d2969502902775eb03146975"
|
||||
integrity sha512-Sg7j110mtefBD+qunSLO1lqOEKdrwBFBrR6Qd8f4uwkhWNlbkaqwHse6e7QvD3AP/MNoJdEDLaf8OxYyoWgorQ==
|
||||
@@ -16869,13 +16818,6 @@ unist-builder@2.0.3, unist-builder@^2.0.0:
|
||||
resolved "https://registry.yarnpkg.com/unist-builder/-/unist-builder-2.0.3.tgz#77648711b5d86af0942f334397a33c5e91516436"
|
||||
integrity sha512-f98yt5pnlMWlzP539tPc4grGMsFaQQlP/vM396b00jngsiINumNmsY8rkXjfoi1c6QaM8nQ3vaGDuoKWbe/1Uw==
|
||||
|
||||
unist-util-find-after@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/unist-util-find-after/-/unist-util-find-after-3.0.0.tgz#5c65fcebf64d4f8f496db46fa8fd0fbf354b43e6"
|
||||
integrity sha512-ojlBqfsBftYXExNu3+hHLfJQ/X1jYY/9vdm4yZWjIbf0VuWF6CRufci1ZyoD/wV2TYMKxXUoNuoqwy+CkgzAiQ==
|
||||
dependencies:
|
||||
unist-util-is "^4.0.0"
|
||||
|
||||
unist-util-generated@^1.0.0:
|
||||
version "1.1.6"
|
||||
resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-1.1.6.tgz#5ab51f689e2992a472beb1b35f2ce7ff2f324d4b"
|
||||
|
||||
Reference in New Issue
Block a user