docs: keep the theme perferences for visitors

lib/components/controls.tsx

@@ -21,6 +21,8 @@ const Controls: React.FC<{}> = React.memo(({
 
   const switchThemes = (type: 'dark' | 'light') => {
     updateCustomTheme({ type })
+    if (typeof window === 'undefined' || !window.localStorage) return
+    window.localStorage.setItem('theme', type)
   }
   const switchLanguages = () => {
     updateChineseState(!isChinese)
@@ -41,7 +43,7 @@ const Controls: React.FC<{}> = React.memo(({
           onClick={redirectGithub}
           title={isChinese? '代码仓库' : 'Github Repository'}>{isChinese ? '代码仓库' : 'Github'}</Button>
         <Spacer x={.75} />
-        <Select size="small" pure onChange={switchThemes} initialValue={isDark ? 'dark' : 'light'}
+        <Select size="small" pure onChange={switchThemes} value={isDark ? 'dark' : 'light'}
           title={isChinese ? '切换主题' : 'Switch Themes'}>
           <Select.Option value="light">
             <div className="select-content">

lib/components/layout.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useTheme } from 'components'
 import Sidebar from './sidebar'
 import TabbarMobile from './sidebar/tabbar-mobile'
@@ -16,6 +16,7 @@ export interface Props {
 
 export const Layout: React.FC<React.PropsWithChildren<Props>> = React.memo(({ children }) => {
   const theme = useTheme()
+  const [showAfterRender, setShowAfterRender] = useState<boolean>(false)
   const { tabbarFixed } = useConfigs()
   const [, setBodyScroll] = useBodyScroll(null, { scrollLayer: true })
   const [expanded, setExpanded] = useState<boolean>(false)
@@ -24,6 +25,9 @@ export const Layout: React.FC<React.PropsWithChildren<Props>> = React.memo(({ ch
     setBodyScroll(!expanded)
   }
   
+  useEffect(() => setShowAfterRender(true), [])
+  
+  if (!showAfterRender) return null
   return (
     <div className="layout">
       <TabbarMobile onClick={mobileTabbarClickHandler} />

lib/components/menu/index.tsx

@@ -1,8 +1,12 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import MenuLinks from './menu-links'
 import MenuSticker from './menu-sticker'
 
-const Menu = () => {
+const Menu: React.FC<{}> = () => {
+  const [showAfterRender, setShowAfterRender] = useState<boolean>(false)
+  useEffect(() => setShowAfterRender(true), [])
+  
+  if (!showAfterRender) return null
   return (
     <div>
       <MenuLinks />

lib/components/menu/menu-sticker.tsx

@@ -57,6 +57,7 @@ const MenuSticker = () => {
           opacity: 0;
           visibility: hidden;
           pointer-events: none;
+          background-color: ${theme.palette.background};
         }
         
         .nav-fill.active {

lib/use-dom-clean.ts

@@ -0,0 +1,10 @@
+import { useEffect } from 'react'
+
+const useDomClean = (): void => {
+  useEffect(() => {
+    document.documentElement.removeAttribute('style')
+    document.body.removeAttribute('style')
+  }, [])
+}
+
+export default useDomClean

pages/_app.tsx

@@ -1,18 +1,26 @@
 import Head from 'next/head'
 import { NextPage } from 'next'
 import { AppProps } from 'next/app'
-import { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { CSSBaseline, ZEITUIProvider, useTheme, ZeitUIThemes } from 'components'
 import Menu from 'lib/components/menu'
 import ConfigContext from 'lib/config-provider'
+import useDomClean from 'lib/use-dom-clean'
 import { DeepPartial } from 'components/utils/types'
 
-const Application: NextPage<AppProps> = ({ Component, pageProps }) => {
+const Application: NextPage<AppProps<{}>> = ({ Component, pageProps }) => {
   const theme = useTheme()
   const [customTheme, setCustomTheme] = useState<DeepPartial<ZeitUIThemes>>({})
   const themeChangeHandle = (theme: DeepPartial<ZeitUIThemes>) => {
     setCustomTheme(theme)
   }
+  
+  useEffect(() => {
+    const theme = window.localStorage.getItem('theme')
+    if (theme !== 'dark') return
+    themeChangeHandle({ type: 'dark' })
+  }, [])
+  useDomClean()
 
   return (
     <>

pages/_document.tsx

@@ -22,20 +22,29 @@ class MyDocument extends Document {
       <Html>
         <Head />
         <body>
-        <Main />
-        <NextScript />
-        <script async src={`https://www.googletagmanager.com/gtag/js?id=UA-110371817-12`} />
-        <script
-          async
-          dangerouslySetInnerHTML={{
-            __html: `
-            window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
-            gtag('config', 'UA-110371817-12');
-            `
-          }}
-        />
+          <script dangerouslySetInnerHTML={{ __html: `
+            (function(){
+              if (!window.localStorage) return;
+              if (window.localStorage.getItem('theme') === 'dark') {
+                document.documentElement.style.background = '#000';
+                document.body.style.background = '#000';
+              };
+            })()
+          `}} />
+          <Main />
+          <NextScript />
+          <script async src="https://www.googletagmanager.com/gtag/js?id=UA-110371817-12" />
+          <script
+            async
+            dangerouslySetInnerHTML={{
+              __html: `
+              window.dataLayer = window.dataLayer || [];
+              function gtag(){dataLayer.push(arguments);}
+              gtag('js', new Date());
+              gtag('config', 'UA-110371817-12');
+              `
+            }}
+          />
         </body>
       </Html>
     )