Fixing light theme selector so it can be stored and remember after page refresh
This commit is contained in:
+1
-1
@@ -31,7 +31,7 @@ data/
|
|||||||
*.swp
|
*.swp
|
||||||
*.swo
|
*.swo
|
||||||
.codex
|
.codex
|
||||||
|
AGENTS.md
|
||||||
|
|
||||||
# Claude Code — share skills/agents/rules/hooks/settings; keep local permissions and worktrees out
|
# Claude Code — share skills/agents/rules/hooks/settings; keep local permissions and worktrees out
|
||||||
.claude/settings.local.json
|
.claude/settings.local.json
|
||||||
|
|||||||
@@ -48,6 +48,8 @@
|
|||||||
document.documentElement.setAttribute('data-theme', 'dark');
|
document.documentElement.setAttribute('data-theme', 'dark');
|
||||||
} else if (stored === 'light') {
|
} else if (stored === 'light') {
|
||||||
document.documentElement.setAttribute('data-theme', 'light');
|
document.documentElement.setAttribute('data-theme', 'light');
|
||||||
|
} else {
|
||||||
|
document.documentElement.removeAttribute('data-theme');
|
||||||
}
|
}
|
||||||
// System/null: tokens.css @media (prefers-color-scheme: dark) übernimmt
|
// System/null: tokens.css @media (prefers-color-scheme: dark) übernimmt
|
||||||
})();
|
})();
|
||||||
|
|||||||
@@ -1788,15 +1788,7 @@ function currentTheme() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function applyTheme(value) {
|
function applyTheme(value) {
|
||||||
localStorage.setItem('oikos-theme', value);
|
window.oikos?.applyTheme(value);
|
||||||
if (value === 'dark') {
|
|
||||||
document.documentElement.setAttribute('data-theme', 'dark');
|
|
||||||
} else if (value === 'light') {
|
|
||||||
document.documentElement.setAttribute('data-theme', 'light');
|
|
||||||
} else {
|
|
||||||
document.documentElement.removeAttribute('data-theme');
|
|
||||||
// tokens.css @media (prefers-color-scheme: dark) übernimmt sofort
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function showError(el, msg) {
|
function showError(el, msg) {
|
||||||
|
|||||||
@@ -1199,6 +1199,16 @@ if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {
|
|||||||
// --------------------------------------------------------
|
// --------------------------------------------------------
|
||||||
(async () => {
|
(async () => {
|
||||||
try {
|
try {
|
||||||
|
// Vorab-Theme-Anwendung ohne Abhängigkeit von window.oikos
|
||||||
|
const stored = localStorage.getItem('oikos-theme');
|
||||||
|
if (stored === 'dark') {
|
||||||
|
document.documentElement.setAttribute('data-theme', 'dark');
|
||||||
|
} else if (stored === 'light') {
|
||||||
|
document.documentElement.setAttribute('data-theme', 'light');
|
||||||
|
} else {
|
||||||
|
document.documentElement.removeAttribute('data-theme');
|
||||||
|
}
|
||||||
|
|
||||||
await initI18n();
|
await initI18n();
|
||||||
navigate(location.pathname, false);
|
navigate(location.pathname, false);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
@@ -1214,6 +1224,16 @@ window.oikos = {
|
|||||||
navigate,
|
navigate,
|
||||||
showToast,
|
showToast,
|
||||||
setThemeColor,
|
setThemeColor,
|
||||||
|
applyTheme: (value) => {
|
||||||
|
localStorage.setItem('oikos-theme', value);
|
||||||
|
if (value === 'dark') {
|
||||||
|
document.documentElement.setAttribute('data-theme', 'dark');
|
||||||
|
} else if (value === 'light') {
|
||||||
|
document.documentElement.setAttribute('data-theme', 'light');
|
||||||
|
} else {
|
||||||
|
document.documentElement.removeAttribute('data-theme');
|
||||||
|
}
|
||||||
|
},
|
||||||
restoreThemeColor: () => {
|
restoreThemeColor: () => {
|
||||||
const route = ROUTES.find((r) => r.path === currentPath);
|
const route = ROUTES.find((r) => r.path === currentPath);
|
||||||
updateThemeColorForRoute(route);
|
updateThemeColorForRoute(route);
|
||||||
|
|||||||
Reference in New Issue
Block a user