From d92e2baa0a8b739d180c12ea6c06b7cac243b371 Mon Sep 17 00:00:00 2001 From: Jiaxin Peng Date: Tue, 11 Jul 2023 00:44:12 +0100 Subject: [PATCH] add code highlight theme changed with theme mode --- blog.config.js | 18 ++++++++----- components/PrismMac.js | 58 ++++++++++++++++++++++++++++++++++-------- 2 files changed, 60 insertions(+), 16 deletions(-) diff --git a/blog.config.js b/blog.config.js index dfd1498c..179916f0 100644 --- 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 index 01f4e65b..e45cbf83 100644 --- 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 <> }