From c47b842c74ca929d2f4e0548fdc07d5c9860a8af Mon Sep 17 00:00:00 2001 From: Shea Duma Date: Thu, 9 Apr 2026 07:18:14 +0300 Subject: [PATCH 1/3] basic working version --- .../settings/account/NameColorEditor.tsx | 154 +++++++++--------- src/app/features/settings/account/Profile.tsx | 22 ++- src/app/hooks/useUserProfile.ts | 37 ++++- 3 files changed, 131 insertions(+), 82 deletions(-) diff --git a/src/app/features/settings/account/NameColorEditor.tsx b/src/app/features/settings/account/NameColorEditor.tsx index 8185dc2c0..9428a8e02 100644 --- a/src/app/features/settings/account/NameColorEditor.tsx +++ b/src/app/features/settings/account/NameColorEditor.tsx @@ -7,6 +7,7 @@ import { HexColorPickerPopOut } from '$components/HexColorPickerPopOut'; type NameColorEditorProps = { title: string; description?: string; + focusId?: string; current?: string; onSave: (color: string | null) => void; disabled?: boolean; @@ -15,6 +16,7 @@ type NameColorEditorProps = { export function NameColorEditor({ title, description, + focusId, current, onSave, disabled, @@ -57,89 +59,95 @@ export function NameColorEditor({ return ( - - - - } + - {(onOpen, opened) => ( - + )} + + + + handleUpdate(e.currentTarget.value)} + placeholder="#FFFFFF" + variant="Background" + size="300" + radii="300" + disabled={disabled ?? false} style={{ - width: '32px', - height: '32px', - borderRadius: '50%', - backgroundColor: tempColor, - boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.1)', + textTransform: 'uppercase', + fontFamily: 'monospace', + width: '100px', }} /> - - )} - + {current && ( + + + + )} + + - - handleUpdate(e.currentTarget.value)} - placeholder="#FFFFFF" - variant="Background" - size="300" - radii="300" - disabled={disabled ?? false} - style={{ - textTransform: 'uppercase', - fontFamily: 'monospace', - width: '100px', - }} - /> - {current && ( - - - + Save + )} - - - {hasChanged && ( - - )} - + } + /> ); } diff --git a/src/app/features/settings/account/Profile.tsx b/src/app/features/settings/account/Profile.tsx index 834bd511d..16e022a94 100644 --- a/src/app/features/settings/account/Profile.tsx +++ b/src/app/features/settings/account/Profile.tsx @@ -539,11 +539,30 @@ function ProfileExtended({ profile, userId }: Readonly) { gap="400" > handleSaveField('moe.sable.app.name_color', color)} /> + handleSaveField('moe.sable.app.name_color_dark_theme', color)} + /> + handleSaveField('moe.sable.app.name_color_light_theme', color)} + /> diff --git a/src/app/hooks/useUserProfile.ts b/src/app/hooks/useUserProfile.ts index 3308e6813..4d78035ea 100644 --- a/src/app/hooks/useUserProfile.ts +++ b/src/app/hooks/useUserProfile.ts @@ -9,6 +9,7 @@ import { useSetting } from '$state/hooks/settings'; import { settingsAtom } from '$state/settings'; import { MSC1767Text } from '$types/matrix/common'; import { useMatrixClient } from './useMatrixClient'; +import { ThemeKind, useActiveTheme } from './useTheme'; const inFlightProfiles = new Map>(); @@ -25,6 +26,8 @@ export type UserProfile = { status?: string; bannerUrl?: string; nameColor?: string; + nameColorDark?: string; + nameColorLight?: string; isCat?: boolean; hasCats?: boolean; extended?: Record; @@ -45,6 +48,8 @@ const normalizeInfo = (info: any): UserProfile => { 'chat.commet.profile_banner', 'chat.commet.profile_status', 'moe.sable.app.name_color', + 'moe.sable.app.name_color_dark_theme', + 'moe.sable.app.name_color_light_theme', 'kitty.meow.has_cats', 'kitty.meow.is_cat', ]); @@ -68,6 +73,8 @@ const normalizeInfo = (info: any): UserProfile => { status: info['chat.commet.profile_status'], bannerUrl: info['chat.commet.profile_banner'], nameColor: info['moe.sable.app.name_color'], + nameColorDark: info['moe.sable.app.name_color_dark_theme'], + nameColorLight: info['moe.sable.app.name_color_light_theme'], isCat: info['kitty.meow.is_cat'] === true, hasCats: info['kitty.meow.has_cats'] === true, extended, @@ -98,6 +105,7 @@ export const useUserProfile = ( const [renderGlobalColors] = useSetting(settingsAtom, 'renderGlobalNameColors'); const [renderRoomColors] = useSetting(settingsAtom, 'renderRoomColors'); const [renderRoomFonts] = useSetting(settingsAtom, 'renderRoomFonts'); + const themeKind = useActiveTheme().kind; const userSelector = useMemo(() => selectAtom(profilesCacheAtom, (db) => db[userId]), [userId]); @@ -202,12 +210,26 @@ export const useUserProfile = ( } } const validGlobalVal = isValidHex(data?.nameColor); + const validGlobalValDark = isValidHex(data?.nameColorDark); + const validGlobalValLight = isValidHex(data?.nameColorLight); - const hasGlobalColor = !!validGlobalVal; - const validGlobal = - (renderGlobalColors || userId === mx.getUserId()) && hasGlobalColor + const validGlobalGeneral = + (renderGlobalColors || userId === mx.getUserId()) && !!validGlobalVal ? validGlobalVal : undefined; + const validGlobalDark = + (renderGlobalColors || userId === mx.getUserId()) && + themeKind === ThemeKind.Dark && + !!validGlobalValDark + ? validGlobalValDark + : undefined; + const validGlobalLight = + (renderGlobalColors || userId === mx.getUserId()) && + themeKind === ThemeKind.Light && + !!validGlobalValLight + ? validGlobalValLight + : undefined; + const validGlobal = validGlobalDark ?? validGlobalLight ?? validGlobalGeneral; const validLocal = localColor && isValidHex(localColor) ? localColor : undefined; const validSpace = spaceColor && isValidHex(spaceColor) ? spaceColor : undefined; @@ -237,13 +259,14 @@ export const useUserProfile = ( }; }, [ cached, + initialProfile, + mx, userId, room, - mx, - legacyUsernameColor, - renderGlobalColors, - initialProfile, renderRoomColors, renderRoomFonts, + renderGlobalColors, + themeKind, + legacyUsernameColor, ]); }; From 8143a17d6d44be0d6a2fe65a034b008bb319ddc3 Mon Sep 17 00:00:00 2001 From: Shea Duma Date: Thu, 9 Apr 2026 07:26:24 +0300 Subject: [PATCH 2/3] added changeset --- .changeset/feat-add-theme-specific-colors.md | 5 +++++ src/app/features/settings/account/Profile.tsx | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 .changeset/feat-add-theme-specific-colors.md diff --git a/.changeset/feat-add-theme-specific-colors.md b/.changeset/feat-add-theme-specific-colors.md new file mode 100644 index 000000000..1ad50e322 --- /dev/null +++ b/.changeset/feat-add-theme-specific-colors.md @@ -0,0 +1,5 @@ +--- +default: minor +--- + +Add the ability to set Global Name Colors dependent on the theme (dark/light) diff --git a/src/app/features/settings/account/Profile.tsx b/src/app/features/settings/account/Profile.tsx index 16e022a94..da2d140f6 100644 --- a/src/app/features/settings/account/Profile.tsx +++ b/src/app/features/settings/account/Profile.tsx @@ -547,7 +547,7 @@ function ProfileExtended({ profile, userId }: Readonly) { /> ) { /> Date: Thu, 9 Apr 2026 07:32:25 +0300 Subject: [PATCH 3/3] make the text and bubble not move around --- .../settings/account/NameColorEditor.tsx | 23 +++++++++---------- 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/src/app/features/settings/account/NameColorEditor.tsx b/src/app/features/settings/account/NameColorEditor.tsx index 9428a8e02..3215b0970 100644 --- a/src/app/features/settings/account/NameColorEditor.tsx +++ b/src/app/features/settings/account/NameColorEditor.tsx @@ -75,6 +75,17 @@ export function NameColorEditor({ }} > + {hasChanged && ( + + )} } > @@ -133,18 +144,6 @@ export function NameColorEditor({ )} - - {hasChanged && ( - - )} } />