From 7df06d2e60871e9d5d626e0a09a39903d614d1f1 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Tue, 28 Apr 2026 15:57:19 +0200
Subject: [PATCH 1/2] fix(settings): show correct theme name on
 updateCustomTheme modal (@fehmer)

---
 frontend/src/ts/modals/simple-modals.ts | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/frontend/src/ts/modals/simple-modals.ts b/frontend/src/ts/modals/simple-modals.ts
index 8e415a364b82..424c54749c0e 100644
--- a/frontend/src/ts/modals/simple-modals.ts
+++ b/frontend/src/ts/modals/simple-modals.ts
@@ -31,6 +31,7 @@ import {
 
 import { GenerateDataRequest } from "@monkeytype/contracts/dev";
 import {
+  CustomThemeNameSchema,
   PasswordSchema,
   UserEmailSchema,
   UserNameSchema,
@@ -40,6 +41,8 @@ import { z } from "zod";
 import { remoteValidation } from "../utils/remote-validation";
 import { list, PopupKey, showPopup } from "./simple-modals-base";
 import { getTheme } from "../states/theme";
+import { normalizeName } from "../utils/strings";
+import { IsValidResponse } from "../types/validation";
 
 export { list, showPopup };
 export type { PopupKey };
@@ -972,6 +975,14 @@ list.unlinkDiscord = new SimpleModal({
   },
 });
 
+const customThemeValidation = async (
+  name: string,
+): Promise<IsValidResponse> => {
+  const validationResult = CustomThemeNameSchema.safeParse(normalizeName(name));
+  if (validationResult.success) return true;
+  return validationResult.error.errors.map((err) => err.message).join(", ");
+};
+
 list.updateCustomTheme = new SimpleModal({
   id: "updateCustomTheme",
   title: "Update custom theme",
@@ -980,6 +991,7 @@ list.updateCustomTheme = new SimpleModal({
       type: "text",
       placeholder: "name",
       initVal: "",
+      validation: { isValid: customThemeValidation, debounceDelay: 0 },
     },
     {
       type: "checkbox",
@@ -1040,7 +1052,10 @@ list.updateCustomTheme = new SimpleModal({
       (t) => t._id === _thisPopup.parameters[0],
     );
     if (!customTheme) return;
-    (_thisPopup.inputs[0] as TextInput).initVal = customTheme.name;
+    (_thisPopup.inputs[0] as TextInput).initVal = customTheme.name.replace(
+      /_/g,
+      " ",
+    );
   },
 });
 

From f1a6a77ed5308c4d9b448f15c700b33fb848511f Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Tue, 28 Apr 2026 16:00:51 +0200
Subject: [PATCH 2/2] use normalizeName

---
 frontend/src/ts/modals/simple-modals.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/ts/modals/simple-modals.ts b/frontend/src/ts/modals/simple-modals.ts
index 424c54749c0e..2917a9fd3b8b 100644
--- a/frontend/src/ts/modals/simple-modals.ts
+++ b/frontend/src/ts/modals/simple-modals.ts
@@ -1026,7 +1026,7 @@ list.updateCustomTheme = new SimpleModal({
         : customTheme.colors;
 
     const newTheme = {
-      name: name.replaceAll(" ", "_"),
+      name: normalizeName(name),
       colors: newColors,
     };
     const validation = await DB.editCustomTheme(customTheme._id, newTheme);