mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add support to configure dark mode.

Browse Source
This commit is contained in:
prototypa
2023-01-06 13:10:40 -05:00
parent ac24c9e94e
commit e478745e26
2 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/common/BasicScripts.astro
View File

@ -1,19 +1,27 @@
---
import { SITE } from "~/config.mjs"
---
<script is:inline>
// Set "light" theme as default
// if (!localStorage.theme) {
// localStorage.theme = "light";
// }
<script is:inline define:vars={{ defaultTheme: SITE.defaultTheme }}>
if (
function applyTheme(theme) {
if (theme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}
if ((defaultTheme && defaultTheme.endsWith(":only")) || (!localStorage.theme && defaultTheme !== "system")) {
applyTheme(defaultTheme.replace(":only", ""));
}
else if (
localStorage.theme === 'dark' ||
(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
document.documentElement.classList.add('dark');
applyTheme("dark")
} else {
document.documentElement.classList.remove('dark');
applyTheme("light")
}
function attachEvent(selector, event, fn) {
@ -34,6 +42,9 @@
});
attachEvent('[data-aw-toggle-color-scheme]', 'click', function () {
if (defaultTheme.endsWith(":only")) {
return;
}
document.documentElement.classList.toggle('dark');
localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
});