From 8e9379203ebc6bb1ef81ba7d6cee907177502fbd Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 19 Nov 2025 18:55:33 +0100
Subject: [PATCH] chore: add protection against all custom theme colors being
 the same

---
 frontend/__tests__/root/config.spec.ts | 6 +++---
 frontend/src/ts/config-metadata.ts     | 9 +++++++++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/__tests__/root/config.spec.ts b/frontend/__tests__/root/config.spec.ts
index dc7ce4a70c16..fa431d82b646 100644
--- a/frontend/__tests__/root/config.spec.ts
+++ b/frontend/__tests__/root/config.spec.ts
@@ -527,8 +527,6 @@ describe("Config", () => {
     expect(Config.setCustomThemeColors(customThemeColors(10))).toBe(true);
 
     expect(Config.setCustomThemeColors(customThemeColors(9))).toBe(false);
-    expect(Config.setCustomThemeColors([] as any)).toBe(false);
-    expect(Config.setCustomThemeColors(["invalid"] as any)).toBe(false);
     expect(Config.setCustomThemeColors(customThemeColors(5))).toBe(false);
     expect(Config.setCustomThemeColors(customThemeColors(11))).toBe(false);
 
@@ -931,7 +929,9 @@ describe("Config", () => {
 });
 
 function customThemeColors(n: number): CustomThemeColors {
-  return new Array(n).fill("#000") as CustomThemeColors;
+  const arr = new Array(n).fill("#000") as CustomThemeColors;
+  arr[0] = "#123456"; // we have a protection against all colors being the same
+  return arr;
 }
 
 function testBoolean(fn: (val: boolean) => boolean): void {
diff --git a/frontend/src/ts/config-metadata.ts b/frontend/src/ts/config-metadata.ts
index cbd64a2390e2..7dc8726e8678 100644
--- a/frontend/src/ts/config-metadata.ts
+++ b/frontend/src/ts/config-metadata.ts
@@ -7,6 +7,7 @@ import { isDevEnvironment, reloadAfter } from "./utils/misc";
 import * as ConfigSchemas from "@monkeytype/schemas/configs";
 import { roundTo1 } from "@monkeytype/util/numbers";
 import { capitalizeFirstLetter } from "./utils/strings";
+import { getDefaultConfig } from "./constants/default-config";
 // type SetBlock = {
 //   [K in keyof ConfigSchemas.Config]?: ConfigSchemas.Config[K][];
 // };
@@ -710,6 +711,14 @@ export const configMetadata: ConfigMetadataObject = {
     icon: "fa-palette",
     displayString: "custom theme colors",
     changeRequiresRestart: false,
+    overrideValue: ({ value }) => {
+      const allColorsThesame = value.every((color) => color === value[0]);
+      if (allColorsThesame) {
+        return getDefaultConfig().customThemeColors;
+      } else {
+        return value;
+      }
+    },
   },
 
   // hide elements