Add theme toggle with cookies

This commit is contained in:
Korbs 2024-10-25 14:53:27 -04:00
parent e235a064ec
commit 05511d7400

View file

@ -1,6 +1,13 @@
---
// Components
import { Tooltips } from 'astro-tooltips'
// User Configuration
if (Astro.cookies.get("Theme").value === "Light") {
var ThemeScheme = 'light'
} else if (Astro.cookies.get("Theme").value === "Dark") {
var ThemeScheme = 'dark'
}
---
<head>
@ -15,6 +22,23 @@ import { Tooltips } from 'astro-tooltips'
<!-- Favicon -->
<link rel="apple-touch-icon" href="https://md.sudovanilla.org/images/Union.png" />
<link rel="icon" href="https://md.sudovanilla.org/images/Union.png" />
<!-- Fonts -->
<link rel="preload" href="/fonts/Mona-Sans/Mona-Sans.woff2" as="font" type="font/woff2" crossorigin>
<!-- Tooltip -->
<Tooltips interactive={false} delay={[15, 1000]} />
</head>
<body class={ThemeScheme}>
<script>
// If First Launch
if (localStorage.getItem('BeenHereBefore') === 'true') {
null
} else {
SetDefaults()
}
function SetDefaults() {
localStorage.setItem('BeenHereBefore', 'true')
document.cookie = "Theme=Dark";
}
</script>