53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
const light = require("!!raw-loader!@hibas123/theme/out/light.css").default;
|
|
const dark = require("!!raw-loader!@hibas123/theme/out/dark.css").default;
|
|
|
|
export enum ThemeStates {
|
|
AUTO,
|
|
LIGHT,
|
|
DARK
|
|
}
|
|
|
|
let themeConfig: ThemeStates = Number(localStorage.getItem("theme"));
|
|
if (Number.isNaN(themeConfig))
|
|
themeConfig = ThemeStates.AUTO;
|
|
|
|
let isDark = false;
|
|
let mediaIsDark = false;
|
|
|
|
if (window.matchMedia) {
|
|
const mediaq = matchMedia("(prefers-color-scheme: dark)");
|
|
mediaIsDark = mediaq.matches;
|
|
mediaq.onchange = ev => {
|
|
mediaIsDark = ev.matches;
|
|
apply();
|
|
}
|
|
console.log(mediaq);
|
|
}
|
|
|
|
|
|
let styleElm: HTMLStyleElement;
|
|
function apply(force?: boolean) {
|
|
let shouldDark = themeConfig === ThemeStates.AUTO ? mediaIsDark : themeConfig === ThemeStates.DARK;
|
|
if (force || shouldDark !== isDark) {
|
|
if (styleElm) styleElm.remove();
|
|
styleElm = document.createElement("style");
|
|
document.head.appendChild(styleElm);
|
|
styleElm.innerHTML = shouldDark ? dark : light;
|
|
isDark = shouldDark;
|
|
}
|
|
}
|
|
apply(true);
|
|
|
|
|
|
function change(state: ThemeStates) {
|
|
themeConfig = state;
|
|
localStorage.setItem("theme", String(themeConfig));
|
|
apply();
|
|
}
|
|
|
|
export default {
|
|
active: () => themeConfig,
|
|
change: (state: ThemeStates) => change(state)
|
|
}
|
|
|