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/NameColorEditor.tsx b/src/app/features/settings/account/NameColorEditor.tsx
index 8185dc2c0..3215b0970 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,94 @@ export function NameColorEditor({
return (
-
-
-
- }
+
- {(onOpen, opened) => (
-
- )}
-
-
-
- handleUpdate(e.currentTarget.value)}
- placeholder="#FFFFFF"
- variant="Background"
- size="300"
- radii="300"
- disabled={disabled ?? false}
- style={{
- textTransform: 'uppercase',
- fontFamily: 'monospace',
- width: '100px',
- }}
- />
- {current && (
-
-
-
- )}
+ {current && (
+
+
+
+ )}
+
+
-
-
- {hasChanged && (
-
- Save
-
- )}
-
+ }
+ />
);
}
diff --git a/src/app/features/settings/account/Profile.tsx b/src/app/features/settings/account/Profile.tsx
index 834bd511d..da2d140f6 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,
]);
};