65 lines
1.9 KiB
HTML
65 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="icon" href="/favicon.ico">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link href="/src/assets/css/main.css" rel="stylesheet">
|
|
<title>Vite App</title>
|
|
</head>
|
|
|
|
<body>
|
|
<script>
|
|
let initialTheme = localStorage.getItem("theme");
|
|
const darkModeMq = window.matchMedia("(prefers-color-scheme: dark)");
|
|
|
|
// Initial paint from localstorage
|
|
switch (initialTheme) {
|
|
case "light":
|
|
enableLightTheme();
|
|
break;
|
|
case "system":
|
|
resetTheme();
|
|
break;
|
|
case "dark":
|
|
default:
|
|
enableDarkTheme();
|
|
break;
|
|
}
|
|
|
|
// Enables dark theme and updates preferences
|
|
function enableDarkTheme() {
|
|
document.documentElement.classList.add('dark');
|
|
document.documentElement.classList.remove('light');
|
|
localStorage.setItem("theme", "dark");
|
|
}
|
|
|
|
// Enables light theme and updates preferences
|
|
function enableLightTheme() {
|
|
document.documentElement.classList.add('light');
|
|
document.documentElement.classList.remove('dark');
|
|
localStorage.setItem("theme", "light");
|
|
}
|
|
|
|
// Reset theme to OS values
|
|
function resetTheme() {
|
|
const prefersDark = darkModeMq.matches;
|
|
|
|
if (prefersDark) {
|
|
document.documentElement.classList.add('dark');
|
|
document.documentElement.classList.remove('light');
|
|
} else {
|
|
document.documentElement.classList.add('light');
|
|
document.documentElement.classList.remove('dark');
|
|
}
|
|
|
|
localStorage.setItem("theme", "system");
|
|
}
|
|
</script>
|
|
|
|
<div id="app"></div>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
|
|
</html> |