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 (#505) — v0.50.50

Browse Source 
fix(themes): swap Prism syntax-highlighting theme on light/dark switch (#505) — PR #530
This commit is contained in:
nesquena-hermes
2026-04-15 12:05:12 -07:00
committed by GitHub
parent e4688425ab 03df7132d0
commit 3033fb65e3
3 changed files with 17 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.md
View File

@@ -1,5 +1,10 @@
# Hermes Web UI -- Changelog
## [v0.50.50] — 2026-04-15
### Fixed
- **Code block syntax highlighting** — Prism theme now follows the active UI theme. Light mode uses the default Prism light theme; dark mode uses `prism-tomorrow`. Theme swaps happen immediately on toggle including on first load. Adds `id="prism-theme"` to the Prism CSS link so JavaScript can locate and swap it. (Closes #505, PR #530 by @mariosam95)
## [v0.50.49] — 2026-04-15
### Fixed

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)');

4
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>
@@ -552,7 +552,7 @@
<div class="settings-section-title">System</div>
<div class="settings-section-meta">Instance version and access controls.</div>
</div>
<span class="settings-version-badge">v0.50.49</span>
<span class="settings-version-badge">v0.50.50</span>
</div>
<div class="settings-field" style="border-top:1px solid var(--border);padding-top:12px;margin-top:8px">
<label for="settingsPassword" data-i18n="settings_label_password">Access Password</label>