From 5fb57745b69225fdf2e72bef0abae00af575ba41 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 26 Feb 2026 19:21:28 -0600 Subject: [PATCH] Fix theme comparison to use hex values, avoiding HSL precision loss from round-trip --- src/pages/ProfilePage.tsx | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx index 208e2b11..b992f3be 100644 --- a/src/pages/ProfilePage.tsx +++ b/src/pages/ProfilePage.tsx @@ -45,7 +45,7 @@ import { useTheme } from '@/hooks/useTheme'; import { useLocalStorage } from '@/hooks/useLocalStorage'; import { useFeedSettings } from '@/hooks/useFeedSettings'; import { useEncryptedSettings } from '@/hooks/useEncryptedSettings'; -import { buildThemeCssFromCore, coreToTokens, buildThemeCss, resolveTheme, resolveThemeConfig, toThemeVar } from '@/themes'; +import { buildThemeCssFromCore, coreToTokens, buildThemeCss, resolveTheme, resolveThemeConfig, toThemeVar, type CoreThemeColors } from '@/themes'; import { loadAndApplyFont } from '@/lib/fontLoader'; import { hslStringToHex } from '@/lib/colorUtils'; import { cn, STICKY_HEADER_CLASS } from '@/lib/utils'; @@ -755,12 +755,17 @@ export function ProfilePage() { // so the profile doesn't appear with the user's custom colors. const needsSystemFallback = !profileThemeColors && ownTheme === 'custom'; - // Detect whether the app custom theme differs from the published profile theme - const ownCustomThemeSnapshot = ownCustomTheme ? JSON.stringify(ownCustomTheme.colors) + JSON.stringify(ownCustomTheme.font ?? '') + JSON.stringify(ownCustomTheme.background ?? '') : null; - const profileThemeDiffers = profileHasTheme && ownCustomThemeSnapshot && profileTheme - ? (JSON.stringify(profileTheme.colors) !== JSON.stringify(ownCustomTheme?.colors) - || JSON.stringify(profileTheme.font ?? '') !== JSON.stringify(ownCustomTheme?.font ?? '') - || JSON.stringify(profileTheme.background ?? '') !== JSON.stringify(ownCustomTheme?.background ?? '')) + // Detect whether the app custom theme differs from the published profile theme. + // Colors are compared via hex to avoid HSL precision issues from the hex round-trip. + const colorsToHex = (c: CoreThemeColors) => + `${hslStringToHex(c.primary)}${hslStringToHex(c.text)}${hslStringToHex(c.background)}`; + const ownCustomThemeSnapshot = ownCustomTheme + ? colorsToHex(ownCustomTheme.colors) + JSON.stringify(ownCustomTheme.font ?? '') + JSON.stringify(ownCustomTheme.background ?? '') + : null; + const profileThemeDiffers = profileHasTheme && ownCustomThemeSnapshot && profileTheme && ownCustomTheme + ? (colorsToHex(profileTheme.colors) !== colorsToHex(ownCustomTheme.colors) + || JSON.stringify(profileTheme.font ?? '') !== JSON.stringify(ownCustomTheme.font ?? '') + || JSON.stringify(profileTheme.background ?? '') !== JSON.stringify(ownCustomTheme.background ?? '')) : false; // Show share-theme prompt on own profile when: