64 lines
2.1 KiB
JavaScript
64 lines
2.1 KiB
JavaScript
// theme.js — theme picker menu + syntax highlighting hooks.
|
|
//
|
|
// The critical "read from localStorage" snippet is inlined in the <head>
|
|
// via render.lua to avoid flash-of-wrong-theme. This file wires the
|
|
// header theme menu (auto/light/dark/mac8) and highlight.js.
|
|
|
|
(function () {
|
|
var THEMES = ['auto', 'light', 'dark', 'mac8'];
|
|
|
|
function currentTheme() {
|
|
var t = localStorage.getItem('theme');
|
|
return THEMES.indexOf(t) > 0 ? t : 'auto';
|
|
}
|
|
|
|
function markActive() {
|
|
var cur = currentTheme();
|
|
document.querySelectorAll('.theme-option').forEach(function (b) {
|
|
b.classList.toggle('theme-active', b.dataset.themeChoice === cur);
|
|
});
|
|
}
|
|
|
|
function applyTheme(t) {
|
|
if (t === 'auto') {
|
|
delete document.documentElement.dataset.theme;
|
|
localStorage.removeItem('theme');
|
|
} else {
|
|
document.documentElement.dataset.theme = t;
|
|
localStorage.setItem('theme', t);
|
|
}
|
|
markActive();
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
markActive();
|
|
var menu = document.getElementById('theme-menu');
|
|
if (!menu) return;
|
|
menu.addEventListener('click', function (e) {
|
|
var btn = e.target.closest('.theme-option');
|
|
if (!btn) return;
|
|
applyTheme(btn.dataset.themeChoice);
|
|
menu.open = false;
|
|
});
|
|
// Close the menu when clicking anywhere else.
|
|
document.addEventListener('click', function (e) {
|
|
if (menu.open && !menu.contains(e.target)) menu.open = false;
|
|
});
|
|
});
|
|
})();
|
|
|
|
// Syntax highlighting: run highlight.js over fenced code blocks on page
|
|
// load and again after every HTMX swap (boosted nav, editor preview).
|
|
// highlight.js marks processed elements, so re-running is safe.
|
|
function highlightCode(root) {
|
|
if (!window.hljs) return;
|
|
(root || document).querySelectorAll('pre code').forEach(function (el) {
|
|
if (el.dataset.highlighted !== 'yes') window.hljs.highlightElement(el);
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function () { highlightCode(); });
|
|
document.addEventListener('htmx:afterSwap', function (e) {
|
|
highlightCode(e.target);
|
|
});
|