feat: old page dark mode compatible

This commit is contained in:
Dean-YZG
2024-05-06 22:23:21 +08:00
parent 68f0fa917f
commit fa2f8c66d1
8 changed files with 98 additions and 47 deletions

View File

@@ -1,5 +1,6 @@
import { useLayoutEffect } from "react";
import { Theme, useAppConfig } from "@/app/store/config";
import { getCSSVar } from "../utils";
const DARK_CLASS = "dark-new";
const LIGHT_CLASS = "light-new";
@@ -17,4 +18,31 @@ export function useSwitchTheme() {
document.body.classList.add(LIGHT_CLASS);
}
}, [config.theme]);
useLayoutEffect(() => {
document.body.classList.remove("light");
document.body.classList.remove("dark");
if (config.theme === "dark") {
document.body.classList.add("dark");
} else if (config.theme === "light") {
document.body.classList.add("light");
}
const metaDescriptionDark = document.querySelector(
'meta[name="theme-color"][media*="dark"]',
);
const metaDescriptionLight = document.querySelector(
'meta[name="theme-color"][media*="light"]',
);
if (config.theme === "auto") {
metaDescriptionDark?.setAttribute("content", "#151515");
metaDescriptionLight?.setAttribute("content", "#fafafa");
} else {
const themeColor = getCSSVar("--theme-color");
metaDescriptionDark?.setAttribute("content", themeColor);
metaDescriptionLight?.setAttribute("content", themeColor);
}
}, [config.theme]);
}