From 5e7e6fcfca76c8a8bfb9a54589841089c93a60f8 Mon Sep 17 00:00:00 2001
From: Kyle Huang <thekylehuang@gmail.com>
Date: Sat, 31 Jan 2026 22:14:40 -0800
Subject: [PATCH 1/3] feat: add the cole colorscheme as a theme

---
 frontend/src/ts/constants/themes.ts | 13 ++++++++++++-
 packages/schemas/src/themes.ts      |  1 +
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/frontend/src/ts/constants/themes.ts b/frontend/src/ts/constants/themes.ts
index d91376dc56dc..abd5b389dfd2 100644
--- a/frontend/src/ts/constants/themes.ts
+++ b/frontend/src/ts/constants/themes.ts
@@ -2325,8 +2325,19 @@ export const themes: Record<ThemeName, Theme> = {
     colorfulError: "#b29a91",
     colorfulErrorExtra: "#b29a91",
   },
+  cole: {
+    bg: "#0c0c0c",
+    caret: "#f2e6cf",
+    main: "#2d9969",
+    sub: "#a5a5a5",
+    subAlt: "#b0b0b0",
+    text: "#f2e6cf",
+    error: "#cc5d4b",
+    errorExtra: "#cc5d4b",
+    colorfulError: "#cc5d4b",
+    colorfulErrorExtra: "#cc5d4b",
+  },
 };
-
 export type ThemeWithName = Theme & { name: ThemeName };
 export const ThemesList: ThemeWithName[] = Object.keys(themes)
   .sort()
diff --git a/packages/schemas/src/themes.ts b/packages/schemas/src/themes.ts
index ace96ba0a33c..5aaf8db68b30 100644
--- a/packages/schemas/src/themes.ts
+++ b/packages/schemas/src/themes.ts
@@ -190,6 +190,7 @@ export const ThemeNameSchema = z.enum(
     "witch_girl",
     "pale_nimbus",
     "spiderman",
+    "cole",
   ],
   {
     errorMap: customEnumErrorHandler("Must be a known theme"),

From 90cdf0960d87538695610c4a51cf19e51de7542a Mon Sep 17 00:00:00 2001
From: Kyle Huang <thekylehuang@gmail.com>
Date: Sun, 1 Feb 2026 08:57:30 -0800
Subject: [PATCH 2/3] feat: edit main color and add css styling for buttons

---
 frontend/src/ts/constants/themes.ts |  5 ++--
 frontend/static/themes/cole.css     | 40 +++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 frontend/static/themes/cole.css

diff --git a/frontend/src/ts/constants/themes.ts b/frontend/src/ts/constants/themes.ts
index abd5b389dfd2..5b6feb27ccc2 100644
--- a/frontend/src/ts/constants/themes.ts
+++ b/frontend/src/ts/constants/themes.ts
@@ -2328,14 +2328,15 @@ export const themes: Record<ThemeName, Theme> = {
   cole: {
     bg: "#0c0c0c",
     caret: "#f2e6cf",
-    main: "#2d9969",
+    main: "#b38d59",
     sub: "#a5a5a5",
-    subAlt: "#b0b0b0",
+    subAlt: "#101010",
     text: "#f2e6cf",
     error: "#cc5d4b",
     errorExtra: "#cc5d4b",
     colorfulError: "#cc5d4b",
     colorfulErrorExtra: "#cc5d4b",
+    hasCss: true,
   },
 };
 export type ThemeWithName = Theme & { name: ThemeName };
diff --git a/frontend/static/themes/cole.css b/frontend/static/themes/cole.css
new file mode 100644
index 000000000000..f453b8e35a13
--- /dev/null
+++ b/frontend/static/themes/cole.css
@@ -0,0 +1,40 @@
+@keyframes logo-color {
+  0% {
+    fill: hsl(8.37, 55.84%, 54.71%);
+  }
+  20% {
+    fill: hsl(153.08, 53.77%, 39.02%);
+  }
+  40% {
+    fill: hsl(34.67, 37.19%, 52.55%);
+  }
+  60% {
+    fill: hsl(225.15, 44.29%, 57.06%);
+  }
+  80% {
+    fill: hsl(300, 23.29%, 57.06%);
+  }
+  100% {
+    fill: hsl(8.37, 55.84%, 54.71%);
+  }
+}
+
+nav .view-start {
+  color: #cc5d4b;
+}
+
+nav .view-leaderboards {
+  color: #2e9969;
+}
+
+nav .view-about {
+  color: #6179c2;
+}
+
+nav .view-settings {
+  color: #b38d59;
+}
+
+header #logo path {
+  animation: logo-color 10s linear infinite;
+}

From 8412347069abfe2089d52b081bae52772744be07 Mon Sep 17 00:00:00 2001
From: Kyle Huang <thekylehuang@gmail.com>
Date: Sun, 1 Feb 2026 09:07:30 -0800
Subject: [PATCH 3/3] style: restore spacing in code

---
 frontend/src/ts/constants/themes.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/ts/constants/themes.ts b/frontend/src/ts/constants/themes.ts
index 5b6feb27ccc2..b96f5995b34f 100644
--- a/frontend/src/ts/constants/themes.ts
+++ b/frontend/src/ts/constants/themes.ts
@@ -2339,6 +2339,7 @@ export const themes: Record<ThemeName, Theme> = {
     hasCss: true,
   },
 };
+
 export type ThemeWithName = Theme & { name: ThemeName };
 export const ThemesList: ThemeWithName[] = Object.keys(themes)
   .sort()