Merge pull request #88 from stack-wuh/feat-performance

feat(ColorSchame): 情景模式跟随系统

hooks/useConfig/index.ts

@@ -1,6 +1,5 @@
 import { createContext, useContext, useEffect } from 'react'
 import { useReactive, useCookieState } from 'ahooks'
-import * as hljs from '@/lib/highlight'
 
 type languages = 'zh-cn' | 'en' | null
 type themes = 'light' | 'dark' | null

hooks/useSystemColorSchema/index.tsx

@@ -0,0 +1,27 @@
+/**
+ * @NOTE 获取浏览器的当前的情景模式
+ * 
+ * * 通过prefers-color-schema: dark 来判断用户浏览器是否是暗黑模式
+ */
+interface IOptions {
+  change: (e: any) => void
+}
+
+const options = {
+  change () {}
+}
+
+const useSystemColorSchema = (ops: IOptions = options): Boolean => {
+  const prefersSchema = window.matchMedia('(prefers-color-scheme: dark)')
+
+  if (ops && ops.change) {
+    prefersSchema.addEventListener('change', function (e) {
+      ops.change(e)
+    })
+  }
+
+  return prefersSchema.matches
+}
+
+
+export default typeof window !== 'undefined' ? useSystemColorSchema : () => {}

layout/layout.tsx

@@ -8,6 +8,7 @@ import {
   LinkButtonGroup,
   GalleryButton,
 } from '@/components/button'
+import useSystemColorSchema from '@/hooks/useSystemColorSchema'
 
 import Response from './response'
 
@@ -22,8 +23,15 @@ const ConfigWrapper: React.FC = () => (
   </div>
 )
 
-function Layout<T>(Component: React.ComponentType<T>) {
-  const inner = (props: T) => {
+function Layout<T>(Component: React.FC<T>) {
+  useSystemColorSchema({
+    change(e) {
+      const themeMode = e.matches ? 'dark' : 'light'
+      const parentEl = document.querySelector('html')
+      parentEl?.setAttribute('data-theme-mode', themeMode)
+    }
+  })
+  const inner: React.FC<T> = (props) => {
     return (
       <Response>
         <ConfigWrapper />

pages/_app.tsx

@@ -49,11 +49,6 @@ function MyApp({ Component, pageProps, router }: NextPropsWithLayout) {
    */
   const [bubblePath, setBubblePath] = React.useState('')
 
-  /**
-   * @NOTE web worker 引入的脚本链接
-   */
-  const [themePath, setThemePath] = React.useState('')
-
   /**
    * @NOTE Banner 区域的样式表
    */
@@ -82,7 +77,6 @@ function MyApp({ Component, pageProps, router }: NextPropsWithLayout) {
   useExternal(iconColorPath, { type: 'css' })
 
   useExternal(bubblePath, { type: 'js' })
-  useExternal(themePath, { type: 'js' })
   useExternal(googleFontPath, { type: 'css' })
   useExternal(googleFontNormalPath, { type: 'css' })
 
@@ -93,7 +87,6 @@ function MyApp({ Component, pageProps, router }: NextPropsWithLayout) {
     setIconNormalPath('//at.alicdn.com/t/font_1587964_ap06iu717e5.css')
     setBubblePath('/scripts/bubble.js')
 
-    setThemePath('/scripts/theme-main.js')
 
     setIconColorPath('//at.alicdn.com/t/font_2595178_wa25xow6jmp.css')
     setSlidePath('https://src.wuh.site/stylesheet/slick.min.css')