using different colors if main and text are the same

closes #4060

1 files changed, 17 insertions, 3 deletions

diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 2b4d413dd..03727d021 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -1042,15 +1042,29 @@ export async function applyBurstHeatmap(): Promise<void> {
 
     const themeColors = await ThemeColors.getAll();
 
-    const colors = [
+    let colors = [
       themeColors.colorfulError,
       Misc.blendTwoHexColors(themeColors.colorfulError, themeColors.text, 0.5),
       themeColors.text,
       Misc.blendTwoHexColors(themeColors.main, themeColors.text, 0.5),
       themeColors.main,
     ];
-
-    const unreachedColor = themeColors.sub;
+    let unreachedColor = themeColors.sub;
+
+    if (themeColors.main === themeColors.text) {
+      colors = [
+        themeColors.colorfulError,
+        Misc.blendTwoHexColors(
+          themeColors.colorfulError,
+          themeColors.text,
+          0.5
+        ),
+        themeColors.sub,
+        Misc.blendTwoHexColors(themeColors.sub, themeColors.text, 0.5),
+        themeColors.main,
+      ];
+      unreachedColor = themeColors.subAlt;
+    }
 
     const steps = [
       {