From ba2bc48c585655da470d3bc779a2f00c5d32bc6d Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Fri, 3 Jul 2026 22:48:32 +0300
Subject: [PATCH] Add custom theme to usercards

---
 app/features/user-card/UserCardRepository.server.ts |  3 ++-
 app/features/user-card/components/UserCard.tsx      |  7 ++++++-
 app/styles/vars.css                                 | 10 +++++++---
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/app/features/user-card/UserCardRepository.server.ts b/app/features/user-card/UserCardRepository.server.ts
index 13cf2f25e..f23b89fba 100644
--- a/app/features/user-card/UserCardRepository.server.ts
+++ b/app/features/user-card/UserCardRepository.server.ts
@@ -4,6 +4,7 @@ import { sql } from "kysely";
 import { jsonBuildObject, jsonObjectFrom } from "kysely/helpers/sqlite";
 import { db } from "~/db/sql";
 import type {
+	CustomTheme,
 	HideableUserCardStat,
 	PeakXP,
 	Tables,
@@ -191,7 +192,7 @@ function userCardDataJsonObject(
 		...commonUserObjectFields(eb),
 		shortBio: eb.ref("User.shortBio"),
 		div: eb.ref("User.div"),
-		customTheme: eb.ref("User.customTheme"),
+		customTheme: sql<CustomTheme | null>`IIF(COALESCE("User"."patronTier", 0) >= 2, "User"."customTheme", null)`,
 		hiddenCardStats: eb.ref("User.hiddenCardStats"),
 		banner: bannerJson(eb),
 		friendCode: include?.friendCode
diff --git a/app/features/user-card/components/UserCard.tsx b/app/features/user-card/components/UserCard.tsx
index d9fd6db6c..0ef79fab9 100644
--- a/app/features/user-card/components/UserCard.tsx
+++ b/app/features/user-card/components/UserCard.tsx
@@ -221,7 +221,11 @@ function CardContent({
 	};
 
 	return (
-		<div className={styles.card} style={customThemeStyle(data.customTheme)}>
+		<div
+			className={styles.card}
+			style={customThemeStyle(data.customTheme)}
+			data-custom-theme={data.customTheme ? true : undefined}
+		>
 			<Banner banner={data.banner} />
 			{data.freeAgentPostId !== null ? (
 				<LinkButton
@@ -557,6 +561,7 @@ function customThemeStyle(
 	const style: Record<string, number> = {};
 	for (const [key, value] of Object.entries(customTheme)) {
 		if (value === null) continue;
+		if (key.includes("--_size") || key.includes("--_border")) continue;
 		style[key] = value;
 	}
 
diff --git a/app/styles/vars.css b/app/styles/vars.css
index f4ae19814..9d704dc89 100644
--- a/app/styles/vars.css
+++ b/app/styles/vars.css
@@ -79,7 +79,8 @@ cannot use currentColor inside data URLs
 
 Any changes here NEED to be reflected in oklch-gamut.ts as well
 */
-html.dark {
+html.dark,
+html.dark [data-custom-theme] {
 	--color-base-0: oklch(100% var(--_base-c-0) var(--_base-h));
 	--color-base-1: oklch(95% var(--_base-c-1) var(--_base-h));
 	--color-base-2: oklch(90% var(--_base-c-2) var(--_base-h));
@@ -129,7 +130,8 @@ html.dark {
 	--field-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(145, 145, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
 }
 
-html.light {
+html.light,
+html.light [data-custom-theme] {
 	--color-base-0: oklch(17% var(--_base-c-7) var(--_base-h));
 	--color-base-1: oklch(25% var(--_base-c-6) var(--_base-h));
 	--color-base-2: oklch(32% var(--_base-c-5) var(--_base-h));
@@ -182,7 +184,9 @@ html.light {
 /*
 These are the vars you mainly want to use
 */
-html {
+html,
+/* biome-ignore lint/style/noDescendingSpecificity: [data-custom-theme] re-declares theme vars for card subtrees; different properties than the html.dark/light blocks so no real override */
+[data-custom-theme] {
 	--color-text: var(--color-base-0);
 	--color-text-high: var(--color-base-3);
 	--color-text-inverse: var(--color-base-7);