add code highlight theme changed with theme mode

Han-Orz · Jul 10, 2023 · d92e2ba · d92e2ba
1 parent a91fb21
commit d92e2ba
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 16 deletions.
diff --git a/blog.config.js b/blog.config.js
@@ -2,11 +2,11 @@
 const BLOG = {
   // Important page_id！！！Duplicate Template from  https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5
   NOTION_PAGE_ID:
-      process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5',
+      process.env.NOTION_PAGE_ID || '418c65e930ff4758994e4aaab12e4a7f',
   PSEUDO_STATIC: process.env.NEXT_PUBLIC_PSEUDO_STATIC || false, // 伪静态路径，开启后所有文章URL都以 .html 结尾。
   NEXT_REVALIDATE_SECOND: process.env.NEXT_PUBLIC_REVALIDATE_SECOND || 5, // 更新内容缓存间隔 单位(秒)；即每个页面有5秒的纯静态期、此期间无论多少次访问都不会抓取notion数据；调大该值有助于节省Vercel资源、同时提升访问速率，但也会使文章更新有延迟。
-  THEME: process.env.NEXT_PUBLIC_THEME || 'hexo', // 主题， 支持 ['next','hexo',"fukasawa','medium','example','matery','gitbook','simple'] @see https://preview.tangly1024.com
-  THEME_SWITCH: process.env.NEXT_PUBLIC_THEME_SWITCH || false, // 是否显示切换主题按钮
+  THEME: process.env.NEXT_PUBLIC_THEME || 'matery', // 主题， 支持 ['next','hexo',"fukasawa','medium','example','matery','gitbook','simple'] @see https://preview.tangly1024.com
+  THEME_SWITCH: process.env.NEXT_PUBLIC_THEME_SWITCH || true, // 是否显示切换主题按钮
   LANG: process.env.NEXT_PUBLIC_LANG || 'zh-CN', // e.g 'zh-CN','en-US'  see /lib/lang.js for more.
   SINCE: 2021, // e.g if leave this empty, current year will be used.
   APPEARANCE: process.env.NEXT_PUBLIC_APPEARANCE || 'light', // ['light', 'dark', 'auto'], // light 日间模式 ， dark夜间模式， auto根据时间和主题自动夜间模式
@@ -93,10 +93,16 @@ const BLOG = {
   // PrismJs 代码相关
   PRISM_JS_AUTO_LOADER:
       'https://npm.elemecdn.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js',
+  PRISM_THEME_SWITCH: true, // 是否切换代码块主题
+  PRISM_THEME_PREFIX_PATH: 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-okaidia.css', // 固定代码块主题
+  PRISM_THEME_LIGHT_PATH:
+    'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-solarizedlight.css', // 代码样式主题 更多参考 https://github.com/PrismJS/prism-themes
+  PRISM_THEME_DARK_PATH:
+    'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-okaidia.min.css', // 代码样式主题 更多参考 https://github.com/PrismJS/prism-themes
   PRISM_JS_PATH: 'https://npm.elemecdn.com/prismjs@1.29.0/components/',
-  PRISM_THEME_PATH:
-      'https://npm.elemecdn.com/prism-themes/themes/prism-a11y-dark.min.css', // 代码样式主题 更多参考 https://github.com/PrismJS/prism-themes
-  CODE_MAC_BAR: process.env.NEXT_PUBLIC_CODE_MAC_BAR || true, // 代码左上角显示mac的红黄绿图标
+  // PRISM_THEME_PATH:
+  //     'https://npm.elemecdn.com/prism-themes/themes/prism-a11y-dark.min.css', // 代码样式主题 更多参考 https://github.com/PrismJS/prism-themes
+  CODE_MAC_BAR: process.env.NEXT_PUBLIC_CODE_MAC_BAR || false, // 代码左上角显示mac的红黄绿图标
   CODE_LINE_NUMBERS: process.env.NEXT_PUBLIC_CODE_LINE_NUMBERS || 'false', // 是否显示行号
 
   // Mermaid 图表CDN

diff --git a/components/PrismMac.js b/components/PrismMac.js
@@ -21,17 +21,55 @@ import { useRouter } from 'next/navigation'
 const PrismMac = () => {
   const router = useRouter()
   useEffect(() => {
-    if (JSON.parse(BLOG.CODE_MAC_BAR)) {
-      loadExternalResource('/css/prism-mac-style.css', 'css')
-    }
-    loadExternalResource(BLOG.PRISM_THEME_PATH, 'css')
-    loadExternalResource(BLOG.PRISM_JS_AUTO_LOADER, 'js').then((url) => {
-      if (window?.Prism?.plugins?.autoloader) {
-        window.Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH
+    const handleDarkModeChange = () => {
+      if (JSON.parse(BLOG.CODE_MAC_BAR)) {
+        loadExternalResource('/css/prism-mac-style.css', 'css')
       }
-      renderPrismMac()
-      renderMermaid()
-    })
+      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')
+      }
+      loadExternalResource(BLOG.PRISM_JS_AUTO_LOADER, 'js').then((url) => {
+        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 <></>
 }