diff --git a/app-1.5.0.js b/app-1.5.0.js index dce3634..ba14325 100644 --- a/app-1.5.0.js +++ b/app-1.5.0.js @@ -2,10 +2,63 @@ (function () { window.addEventListener('load', function () { + setupThemeToggle(); preserveQueryParams(); setupMobileMenu(); }); + function setupThemeToggle() { + var root = document.documentElement; + var toggle = document.getElementById('themeToggle'); + var metaThemeColor = document.getElementById('themeColorMeta'); + if (!toggle) { + return; + } + + function getStoredTheme() { + try { + return window.localStorage.getItem('exglos-theme'); + } catch (error) { + return null; + } + } + + function setStoredTheme(theme) { + try { + window.localStorage.setItem('exglos-theme', theme); + } catch (error) { + // Ignore storage failures and keep the active theme for this session only. + } + } + + function resolveTheme() { + var storedTheme = getStoredTheme(); + return storedTheme === 'dark' ? 'dark' : 'light'; + } + + function applyTheme(theme) { + var nextTheme = theme === 'dark' ? 'dark' : 'light'; + var nextAria = nextTheme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'; + + root.setAttribute('data-theme', nextTheme); + toggle.setAttribute('aria-pressed', String(nextTheme === 'dark')); + toggle.setAttribute('aria-label', nextAria); + + if (metaThemeColor) { + metaThemeColor.setAttribute('content', nextTheme === 'dark' ? '#0b0f15' : '#f7f8fa'); + } + } + + applyTheme(resolveTheme()); + + toggle.addEventListener('click', function () { + var currentTheme = root.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'; + var nextTheme = currentTheme === 'dark' ? 'light' : 'dark'; + setStoredTheme(nextTheme); + applyTheme(nextTheme); + }); + } + function preserveQueryParams() { var query = window.location.search; if (!query) { diff --git a/index.html b/index.html index 705acc4..e9ee8c4 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ - + @@ -24,6 +24,26 @@ + @@ -52,6 +72,9 @@ rel="noreferrer" >Buy EXG +