floscr/clj-ui-framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: persist theme across dev targets via ?theme= query param

Browse Source 
Each target reads the theme from ?theme=dark|light on load and applies
it to data-theme before first paint. A MutationObserver syncs theme
changes back to the URL via replaceState, and a click handler appends
?theme= to cross-port navigation links automatically.

The outer iframe shell (dev/index.html) uses postMessage to track theme
changes from iframes and passes the param when switching tabs.

For hiccup, the server also reads ?theme= and sets data-theme on the
<html> element server-side to prevent any flash of wrong theme.
This commit is contained in:
Florian Schroedl
2026-03-05 13:29:01 +01:00
parent 6a1e185877
commit d2395fda44
4 changed files with 152 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
dev/index.html
View File

@@ -64,19 +64,38 @@
<button class="tab" data-target="squint" data-url="http://localhost:3002">Squint</button>
</div>
<div class="frame-container" id="frame-container">
<iframe id="target-frame" src="http://localhost:3003"></iframe>
<iframe id="target-frame"></iframe>
</div>
<script>
const tabs = document.querySelectorAll('.tab');
const frame = document.getElementById('target-frame');
// Track current theme from iframe messages or URL param
var currentTheme = new URLSearchParams(window.location.search).get('theme') || '';
function buildUrl(base) {
var url = new URL(base);
if (currentTheme) url.searchParams.set('theme', currentTheme);
return url.toString();
}
// Set initial iframe URL with theme param
frame.src = buildUrl(document.querySelector('.tab.active').dataset.url);
// Listen for theme changes from iframes
window.addEventListener('message', function(e) {
if (e.data && e.data.type === 'theme-change') {
currentTheme = e.data.theme || '';
}
});
tabs.forEach(tab => {
tab.addEventListener('click', () => {
if (tab.classList.contains('disabled')) return;
tabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
frame.src = tab.dataset.url;
frame.src = buildUrl(tab.dataset.url);
});
});
</script>