深色浅色模式切换

blog.config.js

@@ -91,11 +91,14 @@ const BLOG = {
   BEI_AN: process.env.NEXT_PUBLIC_BEI_AN || '', // 备案号 闽ICP备XXXXXXX
 
   // PrismJs 代码相关
-  PRISM_JS_AUTO_LOADER:
+  PRISM_JS_AUTO_LOADER: 'https://npm.elemecdn.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js',
-      'https://npm.elemecdn.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js',
   PRISM_JS_PATH: 'https://npm.elemecdn.com/prismjs@1.29.0/components/',
-  PRISM_THEME_PATH:
+  // 代码主题 https://github.com/PrismJS/prism-themes
-      'https://npm.elemecdn.com/prism-themes/themes/prism-a11y-dark.min.css', // 代码样式主题 更多参考 https://github.com/PrismJS/prism-themes
+  PRISM_THEME_PREFIX_PATH: 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-okaidia.css', // 代码块默认主题
+  PRISM_THEME_SWITCH: true, // 是否开启浅色/深色模式代码主题切换
+  PRISM_THEME_LIGHT_PATH: 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-solarizedlight.css', // 浅色模式主题
+  PRISM_THEME_DARK_PATH: 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-okaidia.min.css', // 深色模式主题
+
   CODE_MAC_BAR: process.env.NEXT_PUBLIC_CODE_MAC_BAR || true, // 代码左上角显示mac的红黄绿图标
   CODE_LINE_NUMBERS: process.env.NEXT_PUBLIC_CODE_LINE_NUMBERS || 'false', // 是否显示行号
 

components/PrismMac.js

@@ -21,21 +21,67 @@ import { useRouter } from 'next/navigation'
 const PrismMac = () => {
   const router = useRouter()
   useEffect(() => {
-    if (JSON.parse(BLOG.CODE_MAC_BAR)) {
+    const handleDarkModeChange = () => {
-      loadExternalResource('/css/prism-mac-style.css', 'css')
+      // 加载prism样式
-    }
+      loadPrismThemeCSS()
-    loadExternalResource(BLOG.PRISM_THEME_PATH, 'css')
+      if (JSON.parse(BLOG.CODE_MAC_BAR)) {
-    loadExternalResource(BLOG.PRISM_JS_AUTO_LOADER, 'js').then((url) => {
+        loadExternalResource('/css/prism-mac-style.css', 'css')
-      if (window?.Prism?.plugins?.autoloader) {
-        window.Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH
       }
-      renderPrismMac()
+      loadExternalResource(BLOG.PRISM_JS_AUTO_LOADER, 'js').then((url) => {
-      renderMermaid()
+        if (window?.Prism?.plugins?.autoloader) {
-    })
+          window.Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH
+        }
+        renderPrismMac()
+        renderMermaid()
+      })
+    }
+    handleDarkModeChange()
+
+    const handleDarkModeToggle = () => {
+      const currentTheme = document.documentElement.className
+      handleDarkModeChange()
+      document.documentElement.className = currentTheme === 'light' ? 'dark' : 'light'
+    }
+
+    const darkModeSwitchButton = document.getElementById('darkModeButton')
+    darkModeSwitchButton.addEventListener('click', handleDarkModeToggle)
+
+    return () => {
+      darkModeSwitchButton.removeEventListener('click', handleDarkModeToggle)
+    }
   }, [router])
   return <></>
 }
 
+/**
+ * 加载样式
+ */
+const loadPrismThemeCSS = () => {
+  let PRISM_THEME
+  let PRISM_PREVIOUS
+  const themeClass = document.documentElement.className
+  if (BLOG.PRISM_THEME_SWITCH) {
+    if (themeClass === 'dark') {
+      PRISM_THEME = BLOG.PRISM_THEME_DARK_PATH
+      PRISM_PREVIOUS = BLOG.PRISM_THEME_LIGHT_PATH
+      const previousTheme = document.querySelector(`link[href="${PRISM_PREVIOUS}"]`)
+      if (previousTheme) {
+        previousTheme.parentNode.removeChild(previousTheme)
+      }
+    } else {
+      PRISM_THEME = BLOG.PRISM_THEME_LIGHT_PATH
+      PRISM_PREVIOUS = BLOG.PRISM_THEME_DARK_PATH
+      const previousTheme = document.querySelector(`link[href="${PRISM_PREVIOUS}"]`)
+      if (previousTheme) {
+        previousTheme.parentNode.removeChild(previousTheme)
+      }
+    }
+    loadExternalResource(PRISM_THEME, 'css')
+  } else {
+    loadExternalResource(BLOG.PRISM_THEME_PREFIX_PATH, 'css')
+  }
+}
+
 /**
  * 将mermaid语言 渲染成图片
  */