From 402b37d5a1ad43b3d89107a5f953772eb4173d58 Mon Sep 17 00:00:00 2001
From: Miodec <bartnikjack@gmail.com>
Date: Mon, 18 Jul 2022 12:00:19 +0200
Subject: [PATCH] awaiting theme load before getting colors for custom theme
 fixed an issue where loading from preset would cause the page to go black

---
 .../src/ts/controllers/theme-controller.ts    |  2 +-
 frontend/src/ts/settings/theme-picker.ts      | 63 ++++++++++---------
 2 files changed, 33 insertions(+), 32 deletions(-)

diff --git a/frontend/src/ts/controllers/theme-controller.ts b/frontend/src/ts/controllers/theme-controller.ts
index a0d7f83b7..b10704fb1 100644
--- a/frontend/src/ts/controllers/theme-controller.ts
+++ b/frontend/src/ts/controllers/theme-controller.ts
@@ -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(() => {
diff --git a/frontend/src/ts/settings/theme-picker.ts b/frontend/src/ts/settings/theme-picker.ts
index 70afdd6d6..b5d3626f2 100644
--- a/frontend/src/ts/settings/theme-picker.ts
+++ b/frontend/src/ts/settings/theme-picker.ts
@@ -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