diff --git a/frontend/src/ts/constants/themes.ts b/frontend/src/ts/constants/themes.ts
index d91376dc56dc..b96f5995b34f 100644
--- a/frontend/src/ts/constants/themes.ts
+++ b/frontend/src/ts/constants/themes.ts
@@ -2325,6 +2325,19 @@ export const themes: Record<ThemeName, Theme> = {
     colorfulError: "#b29a91",
     colorfulErrorExtra: "#b29a91",
   },
+  cole: {
+    bg: "#0c0c0c",
+    caret: "#f2e6cf",
+    main: "#b38d59",
+    sub: "#a5a5a5",
+    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;
+}
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"),