42 lines
No EOL
1.1 KiB
HTML
42 lines
No EOL
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html ${htmlAttrs}>
|
|
<head>
|
|
${head}
|
|
</head>
|
|
<body ${bodyAttrs}>
|
|
<script>
|
|
// Add dark / light detection that runs before Vue.js load. Borrowed from overreacted.io
|
|
(function() {
|
|
window.__onThemeChange = function() {};
|
|
function setTheme(newTheme) {
|
|
window.__theme = newTheme;
|
|
preferredTheme = newTheme;
|
|
document.body.setAttribute('data-theme', newTheme);
|
|
window.__onThemeChange(newTheme);
|
|
}
|
|
|
|
var preferredTheme;
|
|
try {
|
|
preferredTheme = localStorage.getItem('theme');
|
|
} catch (err) { }
|
|
|
|
window.__setPreferredTheme = function(newTheme) {
|
|
setTheme(newTheme);
|
|
try {
|
|
localStorage.setItem('theme', newTheme);
|
|
} catch (err) {}
|
|
}
|
|
|
|
var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
darkQuery.addListener(function(e) {
|
|
window.__setPreferredTheme(e.matches ? 'dark' : 'light')
|
|
});
|
|
|
|
setTheme(preferredTheme || (darkQuery.matches ? 'dark' : 'light'));
|
|
})();
|
|
</script>
|
|
|
|
${app}
|
|
${scripts}
|
|
</body>
|
|
</html> |