osnova 2

scripts/main.js

@@ -0,0 +1,64 @@
+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 nas</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>
+`;
+
+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 = ` ${document.title}`;
+
+    // Konstrukcija vseh stvari
+    for (let element of document.getElementsByClassName("page-header")) {
+        element.innerHTML = headerHtml;
+    }
+
+    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);
+    }
+});