10h30/astroplate
1
0
Fork 0
mirror of https://github.com/10h30/astroplate.git synced 2026-07-18 14:13:30 +09:00
Code Issues Packages Projects Releases Wiki Activity

refactor toggle theme

Browse Source
This commit is contained in:
TF Mukles
2023-10-18 10:19:56 +06:00
parent 9d1ac829f8
commit cff66f7478
2 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/components/ThemeSwitcher.astro
+11 -8
View File
@@ -45,24 +45,27 @@ const { className }: { className?: string } = Astro.props;
}
<script>
function toggleTheme(themeSwitch: NodeListOf<Element>) {
const currentTheme = localStorage.getItem("theme");
const isDarkTheme = currentTheme === "dark";
import { settings } from "@/config/config.json";
const matchMedia = window.matchMedia("(prefers-color-scheme: dark)");
matchMedia.addEventListener('change', () => toggleTheme(document.querySelectorAll("[data-theme-switcher]")));
function toggleTheme(themeSwitch: NodeListOf<Element>) {
const defaulTheme = settings.default_theme ==="system" ? matchMedia.matches ? "dark" : "light" : settings.default_theme;
const currentTheme = localStorage.getItem("theme") || defaulTheme;
const isDarkTheme = currentTheme === "dark";
themeSwitch.forEach((sw: any) => (sw.checked = isDarkTheme));
document.documentElement.classList.toggle("dark", isDarkTheme);
}
const setDarkMode = () => {
const themeSwitch = document.querySelectorAll("[data-theme-switcher]");
toggleTheme(themeSwitch);
themeSwitch.forEach((sw) => {
sw.addEventListener("click", function () {
const currentTheme = localStorage.getItem("theme");
const newTheme = currentTheme === "dark" ? "light" : "dark";
const defaulTheme = settings.default_theme ==="system" ? matchMedia.matches ? "dark" : "light" : settings.default_theme;
const currentTheme = localStorage.getItem("theme") || defaulTheme;
const newTheme = currentTheme === "light" ? "dark" : "light";
localStorage.setItem("theme", newTheme);
toggleTheme(themeSwitch);
});