9d5db65746
Two-part solution for automatic CSS updates during development: 1. `bb watch-theme` — polls src/ui/*.css and tokens.edn every 500ms, rebuilds dist/theme.css and copies to dev targets on change. 2. `dev/css-live-reload.js` — browser-side script that polls /theme.css and hot-swaps the stylesheet without a full page reload (no FOUC). The watcher runs automatically in the hiccup tmux pane when using `bb dev-all`. It can also be run standalone with `bb watch-theme`. The live-reload script is included in all three dev targets (hiccup, replicant, squint) and copied by `bb build-theme`.
53 lines
1.8 KiB
HTML
53 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="stylesheet" href="/theme.css" />
|
|
<style>
|
|
html, body { margin: 0; padding: 0; }
|
|
</style>
|
|
<script>
|
|
(function() {
|
|
var params = new URLSearchParams(window.location.search);
|
|
var theme = params.get('theme');
|
|
if (theme === 'dark' || theme === 'light') {
|
|
document.documentElement.dataset.theme = theme;
|
|
}
|
|
new MutationObserver(function(mutations) {
|
|
for (var i = 0; i < mutations.length; i++) {
|
|
if (mutations[i].attributeName === 'data-theme') {
|
|
var t = document.documentElement.dataset.theme;
|
|
var url = new URL(window.location);
|
|
if (t) url.searchParams.set('theme', t);
|
|
else url.searchParams.delete('theme');
|
|
history.replaceState(null, '', url);
|
|
if (window.parent !== window) {
|
|
window.parent.postMessage({ type: 'theme-change', theme: t || '' }, '*');
|
|
}
|
|
}
|
|
}
|
|
}).observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
|
|
document.addEventListener('click', function(e) {
|
|
var a = e.target.closest('a[href]');
|
|
if (!a) return;
|
|
try {
|
|
var url = new URL(a.href);
|
|
if (url.hostname === location.hostname && url.port !== location.port) {
|
|
var t = document.documentElement.dataset.theme;
|
|
if (t) url.searchParams.set('theme', t);
|
|
a.href = url.toString();
|
|
}
|
|
} catch (ex) {}
|
|
});
|
|
})();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="app"></div>
|
|
<script type="module" src=".compiled/dev/squint.mjs"></script>
|
|
<script src="/theme-adapter.js" defer></script>
|
|
<script src="/css-live-reload.js" defer></script>
|
|
</body>
|
|
</html>
|