monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-02-27 16:24:41 +08:00
Code Issues Projects Releases Packages Wiki Activity

fix(themes): changing from custom theme to preset always applying default theme

Browse source
This commit is contained in:
Miodec 2023-11-07 13:47:31 +00:00
parent 3daa88bc09
commit 1355b79119
1 changed files with 36 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
frontend/src/ts/controllers/theme-controller.ts
View file

@ -57,6 +57,7 @@ async function updateFavicon(): Promise<void> {
}
function clearCustomTheme(): void {
console.debug("Theme controller clearing custom theme");
for (const e of colorVars) {
document.documentElement.style.setProperty(e, "");
}
@ -66,6 +67,21 @@ let loadStyleLoaderTimeouts: NodeJS.Timeout[] = [];
export async function loadStyle(name: string): Promise<void> {
return new Promise((resolve) => {
function swapCurrentToNext(): void {
console.debug("Theme controller swapping elements");
const current = $("#currentTheme");
const next = $("#nextTheme");
if (next.length === 0) {
console.debug(
"Theme controller failed to swap elements, next is missing"
);
return;
}
current.remove();
next.attr("id", "currentTheme");
}
console.debug("Theme controller loading style", name);
loadStyleLoaderTimeouts.push(
setTimeout(() => {
Loader.show();
@ -78,20 +94,20 @@ export async function loadStyle(name: string): Promise<void> {
link.rel = "stylesheet";
link.id = "nextTheme";
link.onload = (): void => {
console.debug("Theme controller loaded style", name);
Loader.hide();
$("#currentTheme").remove();
$("#nextTheme").attr("id", "currentTheme");
swapCurrentToNext();
loadStyleLoaderTimeouts.map((t) => clearTimeout(t));
loadStyleLoaderTimeouts = [];
$("#keymap .keymapKey").stop(true, true).removeAttr("style");
resolve();
};
link.onerror = (e): void => {
console.debug("Theme controller failed to load style", name, e);
console.error(`Failed to load theme ${name}`, e);
Loader.hide();
Notifications.add("Failed to load theme", 0);
$("#currentTheme").remove();
$("#nextTheme").attr("id", "currentTheme");
swapCurrentToNext();
loadStyleLoaderTimeouts.map((t) => clearTimeout(t));
loadStyleLoaderTimeouts = [];
$("#keymap .keymapKey").stop(true, true).removeAttr("style");
@ -104,8 +120,13 @@ export async function loadStyle(name: string): Promise<void> {
}
if (!headScript) {
console.debug("Theme controller appending link to the head", link);
document.head.appendChild(link);
} else {
console.debug(
"Theme controller inserting link after current theme",
link
);
headScript.after(link);
}
});
@ -123,6 +144,12 @@ async function apply(
customColorsOverride?: string[],
isPreview = false
): Promise<void> {
console.debug(
"Theme controller applying theme",
themeName,
customColorsOverride,
isPreview
);
clearCustomTheme();
const name = customColorsOverride ? "custom" : themeName;
@ -180,6 +207,11 @@ async function set(
themeIdentifier: string,
isAutoSwitch = false
): Promise<void> {
console.debug(
"Theme controller setting theme",
themeIdentifier,
isAutoSwitch
);
await apply(themeIdentifier, undefined, isAutoSwitch);
if (!isAutoSwitch && Config.autoSwitchTheme) {