feat: option to follow the system-wide light/dark mode (#71)

This commit is contained in:
saica.go
2024-04-28 12:43:10 +08:00
committed by GitHub
parent 34af98edec
commit e8cbb7a829
15 changed files with 182 additions and 56 deletions

View File

@@ -69,7 +69,7 @@ const favicons: Favicon[] = siteConfig.favicon.length > 0 ? siteConfig.favicon :
---
<!DOCTYPE html>
<html lang="en" isHome={isHomePage} pathname={testPathName} class="bg-[var(--page-bg)] transition text-[14px] md:text-[16px]">
<html lang="en" isHome={isHomePage} pathname={testPathName} class="bg-[var(--page-bg)] transition dark text-[14px] md:text-[16px]">
<head>
<title>{pageTitle}</title>
@@ -148,7 +148,7 @@ import {
SizeObserverPlugin,
ClickScrollPlugin
} from 'overlayscrollbars';
import {getHue, setHue} from "../utils/setting-utils";
import {getHue, getStoredTheme, setHue, setTheme} from "../utils/setting-utils";
/* Preload fonts */
// (async function() {
@@ -202,7 +202,7 @@ function setClickOutsideToClose(panel: string, ignores: string[]) {
return;
}
}
panelDom.classList.add("closed");
panelDom.classList.add("float-panel-closed");
});
}
setClickOutsideToClose("display-setting", ["display-setting", "display-settings-switch"])
@@ -211,14 +211,8 @@ setClickOutsideToClose("search-panel", ["search-panel", "search-bar", "search-sw
function loadTheme() {
if (localStorage.theme === 'dark' || (!('theme' in localStorage) &&
window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
localStorage.theme = 'dark';
} else {
document.documentElement.classList.remove('dark');
localStorage.theme = 'light';
}
const theme = getStoredTheme()
setTheme(theme)
}
function loadHue() {