Qihan/MyBlog-Next
1
0
Fork 0
mirror of https://github.com/ChenQihan666/MyBlog-Next.git synced 2026-08-14 11:29:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add prefers-color-scheme media query

Browse Source
This commit is contained in:
Sat Naing
2022-09-26 10:11:18 +06:30
parent eb47c8549c
commit 10358b0fbf
1 changed files with 11 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/Layout.astro
+11 -1
View File
@@ -62,11 +62,21 @@ const socialImageURL = new URL(
/> />
<script is:inline> <script is:inline>
const darkModeMediaQuery = window.matchMedia(
"(prefers-color-scheme: dark)"
).matches;
// Get theme data from local storage // Get theme data from local storage
const currentTheme = localStorage.getItem("theme"); const currentTheme = localStorage.getItem("theme");
let theme;
// Set theme to 'theme-dark' if currentTheme is 'dark' // Set theme to 'theme-dark' if currentTheme is 'dark'
const theme = currentTheme === "dark" ? "theme-dark" : ""; if (currentTheme) {
theme = currentTheme === "dark" ? "theme-dark" : "";
} else {
theme = darkModeMediaQuery ? "theme-dark" : "";
}
// Put dark class on html tag to enable dark mode // Put dark class on html tag to enable dark mode
document.querySelector("html").className = theme; document.querySelector("html").className = theme;