diff --git a/404.html b/404.html index e8cbad8..f209c70 100644 --- a/404.html +++ b/404.html @@ -40,6 +40,8 @@ } + + @@ -55,6 +57,8 @@

Sorry, but the page you were trying to view does not exist.

+ + diff --git a/about.html b/about.html index c01cc41..8300570 100644 --- a/about.html +++ b/about.html @@ -21,6 +21,9 @@ + + + @@ -131,7 +134,7 @@ - + diff --git a/index.html b/index.html index 599b1ec..4743188 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ Lars Winter + @@ -21,6 +22,9 @@ + + + @@ -48,13 +52,13 @@ @@ -144,7 +148,7 @@ - + diff --git a/js/app.js b/js/app.js index 2aa8b89..9bb9ef2 100644 --- a/js/app.js +++ b/js/app.js @@ -1,3 +1,5 @@ +// Menu system + const body = document.body; const menuToggle = document.getElementById('menuToggle'); const menuClose = document.getElementById('menuClose'); @@ -54,4 +56,76 @@ if (window.innerWidth >= 768 && body.classList.contains('menu-open')) { closeMenu(); } - }); \ No newline at end of file + }); + + // light-dark toggle + +const STORAGE_KEY = 'theme-preference'; + const root = document.documentElement; + const mq = window.matchMedia('(prefers-color-scheme: dark)'); + + function getSystemTheme() { + return mq.matches ? 'dark' : 'light'; + } + + function getSavedTheme() { + try { + return localStorage.getItem(STORAGE_KEY) || 'system'; + } catch { + return 'system'; + } + } + + function setSavedTheme(value) { + try { + localStorage.setItem(STORAGE_KEY, value); + } catch {} + } + + function applyTheme(theme = getSavedTheme()) { + root.style.colorScheme = theme === 'system' ? 'light dark' : theme; + } + + function getNextTheme() { + return getSavedTheme() === 'system' + ? (getSystemTheme() === 'dark' ? 'light' : 'dark') + : 'system'; + } + + function updateButton() { + const btn = document.getElementById('theme-toggle'); + if (!btn) return; + + const theme = getSavedTheme(); + // btn.textContent = + // theme === 'system' + // ? `Use ${getSystemTheme() === 'dark' ? 'light' : 'dark'} theme` + // : 'Use browser/OS theme'; + } + + function toggleTheme() { + setSavedTheme(getNextTheme()); + applyTheme(); + updateButton(); + } + + function initThemeToggle() { + applyTheme(); + updateButton(); + + const btn = document.getElementById('theme-toggle'); + if (btn) btn.addEventListener('click', toggleTheme); + + mq.addEventListener('change', () => { + if (getSavedTheme() === 'system') { + applyTheme('system'); + updateButton(); + } + }); + } + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', initThemeToggle); + } else { + initThemeToggle(); + } \ No newline at end of file diff --git a/legal-notice.html b/legal-notice.html index de16791..a4c2664 100644 --- a/legal-notice.html +++ b/legal-notice.html @@ -21,6 +21,9 @@ + + + @@ -116,7 +119,7 @@ - + diff --git a/privacy.html b/privacy.html index e7d9421..61d5de1 100644 --- a/privacy.html +++ b/privacy.html @@ -21,6 +21,9 @@ + + + @@ -149,7 +152,7 @@ - +