Sabo/webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(themes): swap Prism syntax-highlighting theme on light/dark switch

Browse Source 
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:
armorbreak001
2026-04-15 16:49:28 +08:00
committed by Hermes Agent
parent e4688425ab
commit 50d7d1cf88
2 changed files with 11 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
static/boot.js
View File

@@ -584,6 +584,16 @@ function _applyTheme(name){
?(window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light')
:name;
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
if(name==='system'){
const mq=window.matchMedia('(prefers-color-scheme:dark)');

2
static/index.html
View File

@@ -9,7 +9,7 @@
<!-- 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">
<!-- 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/plugins/autoloader/prism-autoloader.min.js" integrity="sha384-Uq05+JLko69eOiPr39ta9bh7kld5PKZoU+fF7g0EXTAriEollhZ+DrN8Q/Oi8J2Q" crossorigin="anonymous" defer></script>
</head>