|
|
<!doctype html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="utf-8" /> |
|
|
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
|
%sveltekit.head% |
|
|
</head> |
|
|
|
|
|
<body data-sveltekit-preload-data="hover"> |
|
|
<style> |
|
|
body { |
|
|
background: white; |
|
|
} |
|
|
body.dark { |
|
|
background: #101828; |
|
|
} |
|
|
</style> |
|
|
<script> |
|
|
(function () { |
|
|
const urlParams = new URLSearchParams(window.location.search); |
|
|
const theme = urlParams.get('_theme'); |
|
|
|
|
|
let systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; |
|
|
|
|
|
function updateTheme() { |
|
|
if (theme === 'dark') { |
|
|
document.body.classList.add('dark'); |
|
|
} else if (theme === 'light') { |
|
|
document.body.classList.remove('dark'); |
|
|
} else if (theme === 'system' || theme === null || theme === undefined) { |
|
|
if (systemPrefersDark) { |
|
|
document.body.classList.add('dark'); |
|
|
} else { |
|
|
document.body.classList.remove('dark'); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
updateTheme(); |
|
|
|
|
|
|
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => { |
|
|
systemPrefersDark = event.matches; |
|
|
updateTheme(); |
|
|
}); |
|
|
})(); |
|
|
</script> |
|
|
<div style="display: contents">%sveltekit.body%</div> |
|
|
</body> |
|
|
</html> |
|
|
|
