Make chat color optional

app/components/CustomThemeSelector.module.css

@@ -80,3 +80,7 @@
 		oklch(65% 0.15 360)
 	) !important;
 }
+
+.chatColorPreview {
+	color: oklch(from var(--color-text-accent) l c var(--_chat-h));
+}

app/components/CustomThemeSelector.tsx

@@ -15,6 +15,7 @@ import { THEME_INPUT_LIMITS } from "~/utils/zod";
 import styles from "./CustomThemeSelector.module.css";
 import { Divider } from "./Divider";
 import { LinkButton, SendouButton } from "./elements/Button";
+import { SendouSwitch } from "./elements/Switch";
 import { Label } from "./Label";
 
 const COLOR_SLIDERS = [
@@ -54,15 +55,6 @@ const COLOR_SLIDERS = [
 		labelKey: "accentChroma",
 		isHue: false,
 	},
-	{
-		id: "chat-hue",
-		inputKey: "chatHue",
-		min: THEME_INPUT_LIMITS.BASE_HUE_MIN,
-		max: THEME_INPUT_LIMITS.BASE_HUE_MAX,
-		step: 1,
-		labelKey: "chatHue",
-		isHue: true,
-	},
 ] as const;
 
 const RADIUS_SLIDERS = [
@@ -134,14 +126,15 @@ type ThemeInputKey =
 	| (typeof COLOR_SLIDERS)[number]["inputKey"]
 	| (typeof RADIUS_SLIDERS)[number]["inputKey"]
 	| (typeof BORDER_SLIDERS)[number]["inputKey"]
-	| (typeof SIZE_SLIDERS)[number]["inputKey"];
+	| (typeof SIZE_SLIDERS)[number]["inputKey"]
+	| "chatHue";
 
 export const DEFAULT_THEME_INPUT: ThemeInput = {
 	baseHue: 260,
 	baseChroma: 0.012,
 	accentHue: 270,
 	accentChroma: 0.24,
-	chatHue: 0,
+	chatHue: null,
 	radiusBox: 3,
 	radiusField: 2,
 	radiusSelector: 2,
@@ -163,7 +156,7 @@ export function themeInputFromCustomTheme(
 		accentChroma:
 			(customTheme["--_acc-c-1"] ?? 0) / ACCENT_CHROMA_MULTIPLIERS[1] ||
 			DEFAULT_THEME_INPUT.accentChroma,
-		chatHue: customTheme["--_chat-h"] ?? DEFAULT_THEME_INPUT.chatHue,
+		chatHue: customTheme["--_chat-h"],
 		radiusBox: customTheme["--_radius-box"] ?? DEFAULT_THEME_INPUT.radiusBox,
 		radiusField:
 			customTheme["--_radius-field"] ?? DEFAULT_THEME_INPUT.radiusField,
@@ -253,6 +246,17 @@ export function CustomThemeSelector({
 		applyThemeInput(updatedInput);
 	};
 
+	const chatHueEnabled = themeInput.chatHue !== null;
+
+	const handleChatHueToggle = (isSelected: boolean) => {
+		const updatedInput = {
+			...themeInput,
+			chatHue: isSelected ? 0 : null,
+		};
+		setThemeInput(updatedInput);
+		applyThemeInput(updatedInput);
+	};
+
 	const handleSave = () => {
 		onSave(themeInput);
 	};
@@ -303,6 +307,29 @@ export function CustomThemeSelector({
 						onChange={handleSliderChange}
 					/>
 				))}
+				<div className="mt-2">
+					<SendouSwitch
+						isSelected={chatHueEnabled}
+						onChange={handleChatHueToggle}
+					>
+						{t("common:settings.customTheme.chatHueToggle")}
+					</SendouSwitch>
+				</div>
+				{chatHueEnabled ? (
+					<div className={styles.chatColorPreview}>
+						<ThemeSlider
+							id="chat-hue"
+							inputKey="chatHue"
+							min={THEME_INPUT_LIMITS.BASE_HUE_MIN}
+							max={THEME_INPUT_LIMITS.BASE_HUE_MAX}
+							step={1}
+							label={t("common:settings.customTheme.chatHue")}
+							isHue
+							value={themeInput.chatHue ?? 0}
+							onChange={handleSliderChange}
+						/>
+					</div>
+				) : null}
 			</div>
 			<Divider smallText>{t("common:settings.customTheme.radius")}</Divider>
 			<div className={styles.themeSliders}>

app/db/tables.ts

@@ -70,7 +70,9 @@ export const CUSTOM_THEME_VARS = [
 	"--_size-spacing",
 ] as const;
 export type CustomThemeVar = (typeof CUSTOM_THEME_VARS)[number];
-export type CustomTheme = Record<CustomThemeVar, number>;
+export type CustomTheme = Omit<Record<CustomThemeVar, number>, "--_chat-h"> & {
+	"--_chat-h": number | null;
+};
 
 export interface Team {
 	avatarImgId: number | null;

app/features/chat/components/Chat.module.css

@@ -63,7 +63,7 @@
 .messageUser {
 	font-weight: var(--weight-semi);
 	font-size: var(--font-sm);
-	color: oklch(from var(--color-accent) l c var(--chat-hue));
+	color: oklch(from var(--color-text-accent) l c var(--chat-hue));
 	max-width: 110px;
 	overflow: hidden;
 	text-overflow: ellipsis;

app/utils/zod.ts

@@ -81,7 +81,8 @@ export const themeInputSchema = z.object({
 	chatHue: z
 		.number()
 		.min(THEME_INPUT_LIMITS.BASE_HUE_MIN)
-		.max(THEME_INPUT_LIMITS.BASE_HUE_MAX),
+		.max(THEME_INPUT_LIMITS.BASE_HUE_MAX)
+		.nullable(),
 	radiusBox: z
 		.number()
 		.int()

locales/en/common.json

@@ -332,6 +332,7 @@
 	"settings.customTheme.baseChroma": "Base chroma",
 	"settings.customTheme.accentHue": "Accent hue",
 	"settings.customTheme.accentChroma": "Accent chroma",
+	"settings.customTheme.chatHueToggle": "Use custom chat name color",
 	"settings.customTheme.chatHue": "Chat name color",
 	"settings.customTheme.boxes": "Boxes",
 	"settings.customTheme.fields": "Fields",