From 2b4c6a65ab019f5234529e21dfba5ffbcfd19d92 Mon Sep 17 00:00:00 2001
From: hfcRed <hfcred@gmx.net>
Date: Wed, 4 Mar 2026 18:21:36 +0100
Subject: [PATCH] Add personal theme prop

---
 app/components/CustomThemeSelector.tsx    | 92 +++++++++++++----------
 app/features/settings/routes/settings.tsx |  1 +
 2 files changed, 52 insertions(+), 41 deletions(-)

diff --git a/app/components/CustomThemeSelector.tsx b/app/components/CustomThemeSelector.tsx
index c64effa5c..d3e454d83 100644
--- a/app/components/CustomThemeSelector.tsx
+++ b/app/components/CustomThemeSelector.tsx
@@ -221,12 +221,14 @@ function ThemeSlider({
 export function CustomThemeSelector({
 	initialTheme,
 	isSupporter,
+	isPersonalTheme,
 	onSave,
 	onReset,
 	hidePatreonInfo,
 }: {
 	initialTheme: CustomTheme | null | undefined;
 	isSupporter: boolean;
+	isPersonalTheme: boolean;
 	onSave: (themeInput: ThemeInput) => void;
 	onReset: () => void;
 	hidePatreonInfo?: boolean;
@@ -307,15 +309,17 @@ export function CustomThemeSelector({
 						onChange={handleSliderChange}
 					/>
 				))}
-				<div className="mt-2">
-					<SendouSwitch
-						isSelected={chatHueEnabled}
-						onChange={handleChatHueToggle}
-					>
-						{t("common:settings.customTheme.chatHueToggle")}
-					</SendouSwitch>
-				</div>
-				{chatHueEnabled ? (
+				{isPersonalTheme ? (
+					<div className="mt-2">
+						<SendouSwitch
+							isSelected={chatHueEnabled}
+							onChange={handleChatHueToggle}
+						>
+							{t("common:settings.customTheme.chatHueToggle")}
+						</SendouSwitch>
+					</div>
+				) : null}
+				{chatHueEnabled && isPersonalTheme ? (
 					<div className={styles.chatColorPreview}>
 						<ThemeSlider
 							id="chat-hue"
@@ -347,38 +351,44 @@ export function CustomThemeSelector({
 					/>
 				))}
 			</div>
-			<Divider smallText>{t("common:settings.customTheme.sizes")}</Divider>
-			<div className={styles.themeSliders}>
-				{SIZE_SLIDERS.map((slider) => (
-					<ThemeSlider
-						key={slider.id}
-						id={slider.id}
-						inputKey={slider.inputKey}
-						min={slider.min}
-						max={slider.max}
-						step={slider.step}
-						label={t(`common:settings.customTheme.${slider.labelKey}`)}
-						value={themeInput[slider.inputKey]}
-						onChange={handleSliderChange}
-					/>
-				))}
-			</div>
-			<Divider smallText>{t("common:settings.customTheme.borders")}</Divider>
-			<div className={styles.themeSliders}>
-				{BORDER_SLIDERS.map((slider) => (
-					<ThemeSlider
-						key={slider.id}
-						id={slider.id}
-						inputKey={slider.inputKey}
-						min={slider.min}
-						max={slider.max}
-						step={slider.step}
-						label={t(`common:settings.customTheme.${slider.labelKey}`)}
-						value={themeInput[slider.inputKey]}
-						onChange={handleSliderChange}
-					/>
-				))}
-			</div>
+			{isPersonalTheme ? (
+				<>
+					<Divider smallText>{t("common:settings.customTheme.sizes")}</Divider>
+					<div className={styles.themeSliders}>
+						{SIZE_SLIDERS.map((slider) => (
+							<ThemeSlider
+								key={slider.id}
+								id={slider.id}
+								inputKey={slider.inputKey}
+								min={slider.min}
+								max={slider.max}
+								step={slider.step}
+								label={t(`common:settings.customTheme.${slider.labelKey}`)}
+								value={themeInput[slider.inputKey]}
+								onChange={handleSliderChange}
+							/>
+						))}
+					</div>
+					<Divider smallText>
+						{t("common:settings.customTheme.borders")}
+					</Divider>
+					<div className={styles.themeSliders}>
+						{BORDER_SLIDERS.map((slider) => (
+							<ThemeSlider
+								key={slider.id}
+								id={slider.id}
+								inputKey={slider.inputKey}
+								min={slider.min}
+								max={slider.max}
+								step={slider.step}
+								label={t(`common:settings.customTheme.${slider.labelKey}`)}
+								value={themeInput[slider.inputKey]}
+								onChange={handleSliderChange}
+							/>
+						))}
+					</div>
+				</>
+			) : null}
 			<div className={styles.customThemeSelectorActions}>
 				<SendouButton isDisabled={!isSupporter} onPress={handleSave}>
 					{t("common:actions.save")}
diff --git a/app/features/settings/routes/settings.tsx b/app/features/settings/routes/settings.tsx
index b15736d10..3a13f7db5 100644
--- a/app/features/settings/routes/settings.tsx
+++ b/app/features/settings/routes/settings.tsx
@@ -222,6 +222,7 @@ function CustomColorSelector() {
 
 	return (
 		<CustomThemeSelector
+			isPersonalTheme
 			initialTheme={data.customTheme}
 			isSupporter={isSupporter}
 			onSave={handleSave}