diff --git a/ts/state/selectors/message.ts b/ts/state/selectors/message.ts
index c291e9fa4..9497d8b90 100644
--- a/ts/state/selectors/message.ts
+++ b/ts/state/selectors/message.ts
@@ -61,6 +61,7 @@ import { getMentionsRegex } from '../../types/Message';
 import { SignalService as Proto } from '../../protobuf';
 import type { AttachmentType } from '../../types/Attachment';
 import { isVoiceMessage, canBeDownloaded } from '../../types/Attachment';
+import type { DefaultConversationColorType } from '../../types/Colors';
 import { ReadStatus } from '../../messages/MessageReadStatus';
 
 import type { CallingNotificationType } from '../../util/callingNotification';
@@ -73,6 +74,7 @@ import { strictAssert } from '../../util/assert';
 import { canEditMessage } from '../../util/canEditMessage';
 
 import { getAccountSelector } from './accounts';
+import { getDefaultConversationColor } from './items';
 import {
   getContactNameColorSelector,
   getConversationSelector,
@@ -176,6 +178,7 @@ export type GetPropsForBubbleOptions = Readonly<{
   activeCall?: CallStateType;
   accountSelector: AccountSelectorType;
   contactNameColorSelector: ContactNameColorSelectorType;
+  defaultConversationColor: DefaultConversationColorType;
 }>;
 
 export function hasErrors(
@@ -474,9 +477,11 @@ const getPropsForStoryReplyContext = (
   {
     conversationSelector,
     ourConversationId,
+    defaultConversationColor,
   }: {
     conversationSelector: GetConversationByIdType;
     ourConversationId?: string;
+    defaultConversationColor: DefaultConversationColorType;
   }
 ): PropsData['storyReplyContext'] => {
   const { storyReaction, storyReplyContext } = message;
@@ -491,8 +496,10 @@ const getPropsForStoryReplyContext = (
 
   const conversation = getConversation(message, conversationSelector);
 
-  const { conversationColor, customColor } =
-    getConversationColorAttributes(conversation);
+  const { conversationColor, customColor } = getConversationColorAttributes(
+    conversation,
+    defaultConversationColor
+  );
 
   return {
     authorTitle,
@@ -515,9 +522,11 @@ export const getPropsForQuote = (
   {
     conversationSelector,
     ourConversationId,
+    defaultConversationColor,
   }: {
     conversationSelector: GetConversationByIdType;
     ourConversationId?: string;
+    defaultConversationColor: DefaultConversationColorType;
   }
 ): PropsData['quote'] => {
   const { quote } = message;
@@ -548,8 +557,10 @@ export const getPropsForQuote = (
   const firstAttachment = quote.attachments && quote.attachments[0];
   const conversation = getConversation(message, conversationSelector);
 
-  const { conversationColor, customColor } =
-    getConversationColorAttributes(conversation);
+  const { conversationColor, customColor } = getConversationColorAttributes(
+    conversation,
+    defaultConversationColor
+  );
 
   return {
     authorId,
@@ -587,6 +598,7 @@ export type GetPropsForMessageOptions = Pick<
   | 'regionCode'
   | 'accountSelector'
   | 'contactNameColorSelector'
+  | 'defaultConversationColor'
 >;
 
 function getTextAttachment(
@@ -681,6 +693,7 @@ export const getPropsForMessage = (
     targetedMessageCounter,
     selectedMessageIds,
     contactNameColorSelector,
+    defaultConversationColor,
   } = options;
 
   const { expireTimer, expirationStartTimestamp, conversationId } = message;
@@ -710,8 +723,10 @@ export const getPropsForMessage = (
   });
   const contactNameColor = contactNameColorSelector(conversationId, authorId);
 
-  const { conversationColor, customColor } =
-    getConversationColorAttributes(conversation);
+  const { conversationColor, customColor } = getConversationColorAttributes(
+    conversation,
+    defaultConversationColor
+  );
 
   return {
     attachments,
@@ -785,6 +800,7 @@ export const getMessagePropsSelector = createSelector(
   getContactNameColorSelector,
   getTargetedMessage,
   getSelectedMessageIds,
+  getDefaultConversationColor,
   (
       conversationSelector,
       ourConversationId,
@@ -795,7 +811,8 @@ export const getMessagePropsSelector = createSelector(
       accountSelector,
       contactNameColorSelector,
       targetedMessage,
-      selectedMessageIds
+      selectedMessageIds,
+      defaultConversationColor
     ) =>
     (message: MessageWithUIFieldsType) => {
       return getPropsForMessage(message, {
@@ -810,6 +827,7 @@ export const getMessagePropsSelector = createSelector(
         targetedMessageCounter: targetedMessage?.counter,
         targetedMessageId: targetedMessage?.id,
         selectedMessageIds,
+        defaultConversationColor,
       });
     }
 );
@@ -1919,6 +1937,7 @@ export const getMessageDetails = createSelector(
   getUserConversationId,
   getUserNumber,
   getSelectedMessageIds,
+  getDefaultConversationColor,
   (
     accountSelector,
     contactNameColorSelector,
@@ -1930,7 +1949,8 @@ export const getMessageDetails = createSelector(
     ourPni,
     ourConversationId,
     ourNumber,
-    selectedMessageIds
+    selectedMessageIds,
+    defaultConversationColor
   ): SmartMessageDetailPropsType | undefined => {
     if (!message || !ourConversationId) {
       return;
@@ -2066,6 +2086,7 @@ export const getMessageDetails = createSelector(
         ourNumber,
         regionCode,
         selectedMessageIds,
+        defaultConversationColor,
       }),
       receivedAt: Number(message.received_at_ms || message.received_at),
     };
diff --git a/ts/state/selectors/timeline.ts b/ts/state/selectors/timeline.ts
index 2a69dd0bf..b45768a1e 100644
--- a/ts/state/selectors/timeline.ts
+++ b/ts/state/selectors/timeline.ts
@@ -19,6 +19,7 @@ import {
   getUserACI,
   getUserPNI,
 } from './user';
+import { getDefaultConversationColor } from './items';
 import { getActiveCall, getCallSelector } from './calling';
 import { getPropsForBubble } from './message';
 import { getCallHistorySelector } from './callHistory';
@@ -51,6 +52,7 @@ export const getTimelineItem = (
   const accountSelector = getAccountSelector(state);
   const contactNameColorSelector = getContactNameColorSelector(state);
   const selectedMessageIds = getSelectedMessageIds(state);
+  const defaultConversationColor = getDefaultConversationColor(state);
 
   return getPropsForBubble(message, {
     conversationSelector,
@@ -67,5 +69,6 @@ export const getTimelineItem = (
     activeCall,
     accountSelector,
     selectedMessageIds,
+    defaultConversationColor,
   });
 };
diff --git a/ts/state/smart/ChatColorPicker.tsx b/ts/state/smart/ChatColorPicker.tsx
index 919d6a41d..71d5ce514 100644
--- a/ts/state/smart/ChatColorPicker.tsx
+++ b/ts/state/smart/ChatColorPicker.tsx
@@ -12,6 +12,7 @@ import {
   getConversationsWithCustomColorSelector,
 } from '../selectors/conversations';
 import { getIntl } from '../selectors/user';
+import { getDefaultConversationColor } from '../selectors/items';
 import { getConversationColorAttributes } from '../../util/getConversationColorAttributes';
 
 export type SmartChatColorPickerProps = {
@@ -25,7 +26,11 @@ const mapStateToProps = (
   const conversation = props.conversationId
     ? getConversationSelector(state)(props.conversationId)
     : {};
-  const colorValues = getConversationColorAttributes(conversation);
+  const defaultConversationColor = getDefaultConversationColor(state);
+  const colorValues = getConversationColorAttributes(
+    conversation,
+    defaultConversationColor
+  );
 
   const { customColors } = state.items;
 
diff --git a/ts/state/smart/CompositionArea.tsx b/ts/state/smart/CompositionArea.tsx
index 72421f798..fe30bfa35 100644
--- a/ts/state/smart/CompositionArea.tsx
+++ b/ts/state/smart/CompositionArea.tsx
@@ -21,7 +21,11 @@ import {
   getTheme,
   getUserConversationId,
 } from '../selectors/user';
-import { getEmojiSkinTone, getTextFormattingEnabled } from '../selectors/items';
+import {
+  getDefaultConversationColor,
+  getEmojiSkinTone,
+  getTextFormattingEnabled,
+} from '../selectors/items';
 import {
   getConversationSelector,
   getGroupAdminsSelector,
@@ -169,6 +173,7 @@ const mapStateToProps = (state: StateType, props: ExternalProps) => {
       ? getPropsForQuote(quotedMessage, {
           conversationSelector,
           ourConversationId: getUserConversationId(state),
+          defaultConversationColor: getDefaultConversationColor(state),
         })
       : undefined,
     quotedMessageAuthorAci: quotedMessage?.quote?.authorAci,
diff --git a/ts/state/smart/ConversationDetails.tsx b/ts/state/smart/ConversationDetails.tsx
index f6687b4b2..d36c1ce0b 100644
--- a/ts/state/smart/ConversationDetails.tsx
+++ b/ts/state/smart/ConversationDetails.tsx
@@ -16,7 +16,10 @@ import {
 } from '../selectors/conversations';
 import { getGroupMemberships } from '../../util/getGroupMemberships';
 import { getActiveCallState } from '../selectors/calling';
-import { getAreWeASubscriber } from '../selectors/items';
+import {
+  getAreWeASubscriber,
+  getDefaultConversationColor,
+} from '../selectors/items';
 import { getIntl, getTheme } from '../selectors/user';
 import {
   getBadgesSelector,
@@ -82,6 +85,7 @@ const mapStateToProps = (
   );
 
   const badges = getBadgesSelector(state)(conversation.badges);
+  const defaultConversationColor = getDefaultConversationColor(state);
 
   const groupsInCommon =
     conversation.type === 'direct'
@@ -107,7 +111,7 @@ const mapStateToProps = (
     canAddNewMembers,
     conversation: {
       ...conversation,
-      ...getConversationColorAttributes(conversation),
+      ...getConversationColorAttributes(conversation, defaultConversationColor),
     },
     getPreferredBadge: getPreferredBadgeSelector(state),
     hasActiveCall: Boolean(getActiveCallState(state)),
diff --git a/ts/util/getConversationColorAttributes.ts b/ts/util/getConversationColorAttributes.ts
index eb0c231da..d5166813f 100644
--- a/ts/util/getConversationColorAttributes.ts
+++ b/ts/util/getConversationColorAttributes.ts
@@ -1,21 +1,24 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { ConversationColorType, CustomColorType } from '../types/Colors';
+import type {
+  ConversationColorType,
+  CustomColorType,
+  DefaultConversationColorType,
+} from '../types/Colors';
 import type { ConversationType } from '../state/ducks/conversations';
 
 export function getConversationColorAttributes(
   conversationColors: Pick<
     ConversationType,
     'conversationColor' | 'customColorId' | 'customColor'
-  >
+  >,
+  defaultConversationColor: DefaultConversationColorType
 ): {
   conversationColor: ConversationColorType;
   customColor: CustomColorType | undefined;
   customColorId: string | undefined;
 } {
-  const defaultConversationColor = window.Events.getDefaultConversationColor();
-
   const conversationColor =
     conversationColors.conversationColor || defaultConversationColor.color;
   const customColor =