add code highlight theme changed with theme mode

This commit is contained in:
Jiaxin Peng
2023-07-11 00:44:12 +01:00
parent a91fb21554
commit d92e2baa0a
2 changed files with 60 additions and 16 deletions

View File

@@ -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 <></>
}