35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import { useEffect } from "react";
|
|
import { useAppConfig } from "@/app/store/config";
|
|
import { getCSSVar } from "@/app/utils";
|
|
|
|
export function useSwitchTheme() {
|
|
const config = useAppConfig();
|
|
|
|
useEffect(() => {
|
|
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]);
|
|
}
|