Projets/ObsiGate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add theme synchronization to popout windows with localStorage and cross-window storage events

Browse Source
This commit is contained in:
Bruno Charest 2026-03-24 22:00:59 -04:00
parent b1cee1a0ec
commit 611cd3ca02
1 changed files with 27 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/popout.html
View File

@ -4,8 +4,12 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ObsiGate - Popout</title>
<script>
document.documentElement.setAttribute('data-theme', localStorage.getItem('obsigate-theme') || 'dark');
</script>
<link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" id="hljs-theme-dark">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css" id="hljs-theme-light" disabled>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://unpkg.com/lucide@0.344.0/dist/umd/lucide.min.js"></script>
<style>
@ -40,6 +44,22 @@
</div>
<script>
function applyTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
const darkSheet = document.getElementById('hljs-theme-dark');
const lightSheet = document.getElementById('hljs-theme-light');
if (darkSheet && lightSheet) {
darkSheet.disabled = theme !== 'dark';
lightSheet.disabled = theme !== 'light';
}
}
function initTheme() {
const saved = localStorage.getItem('obsigate-theme') || 'dark';
applyTheme(saved);
}
async function initPopout() {
const pathParts = window.location.pathname.split('/');
const vault = decodeURIComponent(pathParts[2]);
@ -363,7 +383,13 @@
return fmSection;
}
window.onload = initPopout;
initTheme();
window.addEventListener('storage', (event) => {
if (event.key === 'obsigate-theme' && event.newValue) {
applyTheme(event.newValue);
}
});
initPopout();
</script>
</body>
</html>