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

awaiting theme load before getting colors for custom theme

Browse source 
fixed an issue where loading from preset would cause the page to go black
This commit is contained in:
Miodec 2022-07-18 12:00:19 +02:00
parent 58f68765b4
commit 402b37d5a1
2 changed files with 33 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -74,7 +74,7 @@ function clearCustomTheme(): void {
let loadStyleLoaderTimeouts: NodeJS.Timeout[] = [];
async function loadStyle(name: string): Promise<void> {
export async function loadStyle(name: string): Promise<void> {
return new Promise((resolve) => {
loadStyleLoaderTimeouts.push(
setTimeout(() => {

63
frontend/src/ts/settings/theme-picker.ts
View file

@ -362,46 +362,47 @@ $(".pageSettings .section.themes .tabContainer .customTheme input.input")
}
});
$(".pageSettings #loadCustomColorsFromPreset").on("click", () => {
$(".pageSettings #loadCustomColorsFromPreset").on("click", async () => {
// previewTheme(Config.theme);
$("#currentTheme").attr("href", `themes/${Config.theme}.css`);
// $("#currentTheme").attr("href", `themes/${Config.theme}.css`);
await ThemeController.loadStyle(Config.theme);
ThemeController.colorVars.forEach((e) => {
document.documentElement.style.setProperty(e, "");
});
setTimeout(async () => {
ChartController.updateAllChartColors();
// setTimeout(async () => {
ChartController.updateAllChartColors();
const themeColors = await ThemeColors.getAll();
const themeColors = await ThemeColors.getAll();
ThemeController.colorVars.forEach((colorName) => {
let color;
if (colorName === "--bg-color") {
color = themeColors.bg;
} else if (colorName === "--main-color") {
color = themeColors.main;
} else if (colorName === "--sub-color") {
color = themeColors.sub;
} else if (colorName === "--sub-alt-color") {
color = themeColors.subAlt;
} else if (colorName === "--caret-color") {
color = themeColors.caret;
} else if (colorName === "--text-color") {
color = themeColors.text;
} else if (colorName === "--error-color") {
color = themeColors.error;
} else if (colorName === "--error-extra-color") {
color = themeColors.errorExtra;
} else if (colorName === "--colorful-error-color") {
color = themeColors.colorfulError;
} else if (colorName === "--colorful-error-extra-color") {
color = themeColors.colorfulErrorExtra;
}
ThemeController.colorVars.forEach((colorName) => {
let color;
if (colorName === "--bg-color") {
color = themeColors.bg;
} else if (colorName === "--main-color") {
color = themeColors.main;
} else if (colorName === "--sub-color") {
color = themeColors.sub;
} else if (colorName === "--sub-alt-color") {
color = themeColors.subAlt;
} else if (colorName === "--caret-color") {
color = themeColors.caret;
} else if (colorName === "--text-color") {
color = themeColors.text;
} else if (colorName === "--error-color") {
color = themeColors.error;
} else if (colorName === "--error-extra-color") {
color = themeColors.errorExtra;
} else if (colorName === "--colorful-error-color") {
color = themeColors.colorfulError;
} else if (colorName === "--colorful-error-extra-color") {
color = themeColors.colorfulErrorExtra;
}
updateColors($(".colorPicker #" + colorName).parent(), color as string);
});
}, 250);
updateColors($(".colorPicker #" + colorName).parent(), color as string);
});
// }, 250);
});
// Handles click on share custom theme button