74 lines
2.4 KiB
JavaScript
74 lines
2.4 KiB
JavaScript
const headerHtml = `
|
|
<header>
|
|
<nav>
|
|
<div class="nav-left">
|
|
<a class="nav-title" href="/">Slovar Slovenskega Novega Jezika</a>
|
|
</div>
|
|
<div class="nav-right" aria-label="Primary navigation">
|
|
<a class="nav-btn" href="/about.html">O projektu</a>
|
|
<a class="nav-btn" href="/contact.html">Kontakt</a>
|
|
<a class="nav-btn" href="/extras.html">Dodatki</a>
|
|
|
|
<button id="theme-toggle" class="toggle-btn" onclick="toggleTheme()" aria-label="Toggle colour scheme" aria-pressed="false">
|
|
<div class="track"><div class="knob"></div></div>
|
|
<span class="toggle-icon" id="toggle-icon" aria-hidden="true">☀</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
`;
|
|
|
|
const footerHtml = `
|
|
<footer>
|
|
<p>© ${new Date().getFullYear()} Jonas Korene Novak. Vse pravice pridržane.</p>
|
|
</footer>
|
|
`;
|
|
|
|
function getCurrentTheme() {
|
|
return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
|
|
}
|
|
|
|
function updateToggleState(theme) {
|
|
const icon = document.getElementById('toggle-icon');
|
|
const toggleButton = document.getElementById('theme-toggle');
|
|
|
|
if (!icon || !toggleButton) {
|
|
return;
|
|
}
|
|
|
|
icon.textContent = theme === 'dark' ? '🌙' : '☀';
|
|
toggleButton.setAttribute('aria-pressed', theme === 'dark' ? 'true' : 'false');
|
|
toggleButton.setAttribute('aria-label', theme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme');
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
// Naslov
|
|
document.title = `SSNJ - ${document.title}`;
|
|
|
|
// Konstrukcija vseh stvari
|
|
for (let element of document.getElementsByClassName("page-header")) {
|
|
element.innerHTML = headerHtml;
|
|
}
|
|
|
|
for (let element of document.getElementsByClassName("page-footer")) {
|
|
element.innerHTML = footerHtml;
|
|
}
|
|
|
|
updateToggleState(getCurrentTheme());
|
|
});
|
|
|
|
function toggleTheme() {
|
|
const current = getCurrentTheme();
|
|
const next = current === 'dark' ? 'light' : 'dark';
|
|
document.documentElement.setAttribute('data-theme', next);
|
|
localStorage.setItem('theme', next);
|
|
updateToggleState(next);
|
|
}
|
|
|
|
matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
|
|
if (!localStorage.getItem('theme')) {
|
|
const theme = e.matches ? 'dark' : 'light';
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
updateToggleState(theme);
|
|
}
|
|
}); |