mirror of
https://github.com/hrfee/jfa-go.git
synced 2024-11-14 14:20:11 +00:00
Harvey Tindall
2057823b7a
got rid of a bunch of m[l/r/x/y]-x tailwind classes and used more flex-[row/col] gap-2's. UI should be more consistent in general, and with the admin UI. The page you were on is actually read from the URL on reload, however does not keep settings (implemented just for ease of UI editing, really). `missing-colors.js` preprocessor script now applies dark prefixes for <section>s, but like with cards, does not apply a default ~neutral to those without, so that <section class=""> looks different to <section class="~neutral">. Light/dark selector added to setup too, and the actual mode given to the browser through CSS `color-scheme` is correct, meaning things like textareas, checkboxes and controls are now colored according to the theme.
100 lines
3.3 KiB
TypeScript
100 lines
3.3 KiB
TypeScript
export class ThemeManager {
|
|
|
|
private _themeButton: HTMLElement = null;
|
|
private _metaTag: HTMLMetaElement;
|
|
|
|
private _beforeTransition = () => {
|
|
const doc = document.documentElement;
|
|
const onTransitionDone = () => {
|
|
doc.classList.remove('nightwind');
|
|
doc.removeEventListener('transitionend', onTransitionDone);
|
|
}
|
|
doc.addEventListener('transitionend', onTransitionDone);
|
|
if (!doc.classList.contains('nightwind')) {
|
|
doc.classList.add('nightwind');
|
|
}
|
|
};
|
|
|
|
private _updateThemeIcon = () => {
|
|
const icon = this._themeButton.childNodes[0] as HTMLElement;
|
|
if (document.documentElement.classList.contains("dark")) {
|
|
icon.classList.add("ri-sun-line");
|
|
icon.classList.remove("ri-moon-line");
|
|
this._themeButton.classList.add("~warning");
|
|
this._themeButton.classList.remove("~neutral");
|
|
this._themeButton.classList.remove("@high");
|
|
} else {
|
|
icon.classList.add("ri-moon-line");
|
|
icon.classList.remove("ri-sun-line");
|
|
this._themeButton.classList.add("@high");
|
|
this._themeButton.classList.add("~neutral");
|
|
this._themeButton.classList.remove("~warning");
|
|
}
|
|
};
|
|
|
|
bindButton = (button: HTMLElement) => {
|
|
this._themeButton = button;
|
|
this._themeButton.onclick = this.toggle;
|
|
this._updateThemeIcon();
|
|
}
|
|
|
|
toggle = () => {
|
|
this._toggle();
|
|
if (this._themeButton) {
|
|
this._updateThemeIcon();
|
|
}
|
|
}
|
|
|
|
constructor(button?: HTMLElement) {
|
|
this._metaTag = document.querySelector("meta[name=color-scheme]") as HTMLMetaElement;
|
|
const theme = localStorage.getItem("theme");
|
|
if (theme == "dark") {
|
|
this._enable(true);
|
|
} else if (theme == "light") {
|
|
this._enable(false);
|
|
} else if (window.matchMedia('(prefers-color-scheme: dark)').media !== 'not all') {
|
|
this._enable(true);
|
|
}
|
|
|
|
if (button)
|
|
this.bindButton(button);
|
|
}
|
|
|
|
private _toggle = () => {
|
|
let metaValue = "light dark";
|
|
this._beforeTransition();
|
|
if (!document.documentElement.classList.contains('dark')) {
|
|
document.documentElement.classList.add('dark');
|
|
metaValue = "dark light";
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
}
|
|
localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? "dark" : "light");
|
|
|
|
// this._metaTag.setAttribute("content", metaValue);
|
|
};
|
|
|
|
private _enable = (dark: boolean) => {
|
|
const mode = dark ? "dark" : "light";
|
|
const opposite = dark ? "light" : "dark";
|
|
|
|
localStorage.setItem('theme', dark ? "dark" : "light");
|
|
|
|
this._beforeTransition();
|
|
|
|
if (document.documentElement.classList.contains(opposite)) {
|
|
document.documentElement.classList.remove(opposite);
|
|
}
|
|
document.documentElement.classList.add(mode);
|
|
|
|
// this._metaTag.setAttribute("content", `${mode} ${opposite}`);
|
|
};
|
|
|
|
enable = (dark: boolean) => {
|
|
this._enable(dark);
|
|
if (this._themeButton != null) {
|
|
this._updateThemeIcon();
|
|
}
|
|
};
|
|
}
|