d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

深色浅色模式切换

Browse Source
This commit is contained in:
tangly1024.com
2023-07-26 17:53:26 +08:00
parent a91fb21554
commit c3ccb7f72e
2 changed files with 63 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
blog.config.js
View File

@@ -91,11 +91,14 @@ const BLOG = {
BEI_AN: process.env.NEXT_PUBLIC_BEI_AN || '', // 备案号 闽ICP备XXXXXXX
// PrismJs 代码相关
PRISM_JS_AUTO_LOADER:
'https://npm.elemecdn.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js',
PRISM_JS_AUTO_LOADER: '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://npm.elemecdn.com/prism-themes/themes/prism-a11y-dark.min.css', // 代码样式主题 更多参考 https://github.com/PrismJS/prism-themes
// 代码主题 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', // 是否显示行号

66
components/PrismMac.js
View File

@@ -21,21 +21,67 @@ 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 = () => {
// 加载prism样式
loadPrismThemeCSS()
if (JSON.parse(BLOG.CODE_MAC_BAR)) {
loadExternalResource('/css/prism-mac-style.css', 'css')
}
renderPrismMac()
renderMermaid()
})
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 <></>
}
/**
* 加载样式
*/
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语言 渲染成图片
*/