fix(themes): swap Prism syntax-highlighting theme on light/dark switch
The Prism CSS was hardcoded to prism-tomorrow (dark-only), so code blocks stayed dark even when switching to Light or other non-dark themes. - Add id='prism-theme' to the <link> element for runtime lookup - In _applyTheme(), swap href between prism-tomorrow (dark) and prism (light) based on resolved theme - Skips DOM write when the target href is already active Fixes #505
This commit is contained in:
committed by
Hermes Agent
parent
e4688425ab
commit
50d7d1cf88
@@ -584,6 +584,16 @@ function _applyTheme(name){
|
|||||||
?(window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light')
|
?(window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light')
|
||||||
:name;
|
:name;
|
||||||
document.documentElement.dataset.theme=resolved||'dark';
|
document.documentElement.dataset.theme=resolved||'dark';
|
||||||
|
// Swap Prism syntax-highlighting theme to match UI theme
|
||||||
|
(function(){
|
||||||
|
const link=document.getElementById('prism-theme');
|
||||||
|
if(!link) return;
|
||||||
|
const isDark=(resolved!=='light');
|
||||||
|
const want=isDark
|
||||||
|
?'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css'
|
||||||
|
:'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css';
|
||||||
|
if(link.href!==want){ link.href=want; }
|
||||||
|
})();
|
||||||
// Re-register OS change listener whenever system theme is active
|
// Re-register OS change listener whenever system theme is active
|
||||||
if(name==='system'){
|
if(name==='system'){
|
||||||
const mq=window.matchMedia('(prefers-color-scheme:dark)');
|
const mq=window.matchMedia('(prefers-color-scheme:dark)');
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
<!-- KaTeX math rendering CSS (loaded eagerly to prevent layout shift) -->
|
<!-- KaTeX math rendering CSS (loaded eagerly to prevent layout shift) -->
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css" integrity="sha384-5TcZemv2l/9On385z///+d7MSYlvIEw9FuZTIdZ14vJLqWphw7e7ZPuOiCHJcFCP" crossorigin="anonymous">
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css" integrity="sha384-5TcZemv2l/9On385z///+d7MSYlvIEw9FuZTIdZ14vJLqWphw7e7ZPuOiCHJcFCP" crossorigin="anonymous">
|
||||||
<!-- Prism.js syntax highlighting (loaded async, non-blocking) -->
|
<!-- Prism.js syntax highlighting (loaded async, non-blocking) -->
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css" integrity="sha384-wFjoQjtV1y5jVHbt0p35Ui8aV8GVpEZkyF99OXWqP/eNJDU93D3Ugxkoyh6Y2I4A" crossorigin="anonymous">
|
<link id="prism-theme" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css" integrity="sha384-wFjoQjtV1y5jVHbt0p35Ui8aV8GVpEZkyF99OXWqP/eNJDU93D3Ugxkoyh6Y2I4A" crossorigin="anonymous">
|
||||||
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js" integrity="sha384-MXybTpajaBV0AkcBaCPT4KIvo0FzoCiWXgcihYsw4FUkEz0Pv3JGV6tk2G8vJtDc" crossorigin="anonymous" defer></script>
|
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js" integrity="sha384-MXybTpajaBV0AkcBaCPT4KIvo0FzoCiWXgcihYsw4FUkEz0Pv3JGV6tk2G8vJtDc" crossorigin="anonymous" defer></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha384-Uq05+JLko69eOiPr39ta9bh7kld5PKZoU+fF7g0EXTAriEollhZ+DrN8Q/Oi8J2Q" crossorigin="anonymous" defer></script>
|
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha384-Uq05+JLko69eOiPr39ta9bh7kld5PKZoU+fF7g0EXTAriEollhZ+DrN8Q/Oi8J2Q" crossorigin="anonymous" defer></script>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
Reference in New Issue
Block a user