Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-07-06 20:26:17 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Add custom theme to usercards

Browse Source
This commit is contained in:
Kalle 2026-07-03 22:48:32 +03:00
parent 6f639cb557
commit ba2bc48c58
3 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/features/user-card/UserCardRepository.server.ts
View File

@ -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

7
app/features/user-card/components/UserCard.tsx
View File

@ -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;
}

10
app/styles/vars.css
View File

@ -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);