Skip to content

fix: dark mode improvements #3426

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
isekovanic merged 6 commits into from
Feb 25, 2026
Merged

fix: dark mode improvements #3426

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b57bbc9
fix: add proper dark mode support and fix odd cases
isekovanic Feb 24, 2026
e1bf074
fix: polls color scheme
isekovanic Feb 24, 2026
7c0a3aa
fix: reactivity of BG color
isekovanic Feb 24, 2026
707be0f
fix: lint errors and tests
isekovanic Feb 24, 2026
7eb0d05
fix: only emoji rendering
isekovanic Feb 24, 2026
16a16aa
fix: snapshots
isekovanic Feb 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 16 additions & 9 deletions examples/SampleApp/src/components/AttachmentPickerSelectionBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useMemo, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import {
AttachmentTypePickerButton,
Expand All @@ -10,6 +10,7 @@ import {
PollPickerButton,
useAttachmentPickerContext,
useStableCallback,
useTheme,
} from 'stream-chat-react-native';
import { ShareLocationIcon } from '../icons/ShareLocationIcon';
import { LiveLocationCreateModal } from './LocationSharing/CreateLocationModal';
Expand All @@ -19,6 +20,8 @@ export const CustomAttachmentPickerSelectionBar = () => {
const { attachmentPickerStore } = useAttachmentPickerContext();
const { selectedPicker } = useAttachmentPickerState();

const styles = useStyles();

const onRequestClose = () => {
setModalVisible(false);
};
Expand Down Expand Up @@ -47,11 +50,15 @@ export const CustomAttachmentPickerSelectionBar = () => {
);
};

const styles = StyleSheet.create({
selectionBar: {
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 16,
paddingBottom: 12,
},
});
const useStyles = () => {
const { theme: { semantics }} = useTheme();
return useMemo(() => StyleSheet.create({
selectionBar: {
backgroundColor: semantics.composerBg,
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 16,
paddingBottom: 12,
},
}), [semantics])
}
10 changes: 0 additions & 10 deletions examples/SampleApp/src/hooks/useStreamChatTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,16 +61,6 @@ const getChatStyle = (colorScheme: ColorSchemeName): DeepPartial<Theme> => ({
white_smoke: '#F2F2F2',
white_snow: '#FCFCFC',
},
...(colorScheme === 'dark'
? {
messageSimple: {
content: {
receiverMessageBackgroundColor: '#2D2F2F',
senderMessageBackgroundColor: '#101418',
},
},
}
: {}),
});

export const useStreamChatTheme = () => {
Expand Down
13 changes: 8 additions & 5 deletions package/src/components/Message/MessageSimple/MessageContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useMemo, useState } from 'react';
import React, { useMemo } from 'react';
import {
AnimatableNumericValue,
ColorValue,
Expand Down Expand Up @@ -117,7 +117,6 @@ export type MessageContentPropsWithContext = Pick<
* Child of MessageSimple that displays a message's content
*/
const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
const [longPressFired, setLongPressFired] = useState(false);
const {
additionalPressableProps,
Attachment,
Expand Down Expand Up @@ -238,7 +237,6 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
<Pressable
disabled={preventPress}
onLongPress={(event) => {
setLongPressFired(true);
if (onLongPress) {
onLongPress({
emitter: 'messageContent',
Expand All @@ -262,10 +260,9 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
});
}
}}
style={({ pressed }) => [{ opacity: pressed && !longPressFired ? 0.5 : 1 }, container]}
style={container}
{...additionalPressableProps}
onPressOut={(event) => {
setLongPressFired(false);
setNativeScrollability(true);

if (additionalPressableProps?.onPressOut) {
Expand Down Expand Up @@ -382,6 +379,7 @@ const areEqual = (
nextProps: MessageContentPropsWithContext,
) => {
const {
backgroundColor: prevBackgroundColor,
preventPress: prevPreventPress,
goToMessage: prevGoToMessage,
groupStyles: prevGroupStyles,
Expand All @@ -393,6 +391,7 @@ const areEqual = (
t: prevT,
} = prevProps;
const {
backgroundColor: nextBackgroundColor,
preventPress: nextPreventPress,
goToMessage: nextGoToMessage,
groupStyles: nextGroupStyles,
Expand All @@ -403,6 +402,10 @@ const areEqual = (
t: nextT,
} = nextProps;

if (prevBackgroundColor !== nextBackgroundColor) {
return false;
}

if (prevPreventPress !== nextPreventPress) {
return false;
}
Expand Down
14 changes: 5 additions & 9 deletions package/src/components/Message/MessageSimple/MessageSimple.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,16 +120,12 @@ const MessageSimpleWithContext = forwardRef<View, MessageSimplePropsWithContext>

const {
theme: {
colors: { blue_alice, grey_gainsboro, light_blue, light_gray, transparent },
semantics,
colors: { blue_alice, grey_gainsboro, transparent },
messageSimple: {
container,
repliesContainer,
content: {
container: contentContainer,
errorContainer,
receiverMessageBackgroundColor,
senderMessageBackgroundColor,
},
content: { container: contentContainer, errorContainer },
headerWrapper,
lastMessageContainer,
messageGroupedSingleOrBottomContainer,
Expand Down Expand Up @@ -168,7 +164,7 @@ const MessageSimpleWithContext = forwardRef<View, MessageSimplePropsWithContext>
}
}

let backgroundColor = senderMessageBackgroundColor ?? light_blue;
let backgroundColor = semantics.chatBgOutgoing;
if (onlyEmojis && !message.quoted_message) {
backgroundColor = transparent;
} else if (otherAttachments.length) {
Expand All @@ -178,7 +174,7 @@ const MessageSimpleWithContext = forwardRef<View, MessageSimplePropsWithContext>
backgroundColor = blue_alice;
}
} else if (isMessageReceivedOrErrorType) {
backgroundColor = receiverMessageBackgroundColor ?? light_gray;
backgroundColor = semantics.chatBgIncoming;
}

const onSwipeActionHandler = useStableCallback(() => {
Expand Down
4 changes: 2 additions & 2 deletions ...e/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ exports[`MessageAvatar should render message avatar 1`] = `
"width": 32,
},
{
"backgroundColor": "#d1f3f6",
"backgroundColor": "#003a3f",
},
{
"borderColor": "rgba(0, 0, 0, 0.1)",
"borderColor": "rgba(255, 255, 255, 0.2)",
"borderWidth": 1,
},
undefined,
Expand Down
14 changes: 11 additions & 3 deletions package/src/components/Message/MessageSimple/utils/renderText.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,13 +126,11 @@ const defaultMarkdownStyles: MarkdownStyle = {
paragraph: {
marginBottom: 8,
fontSize: primitives.typographyFontSizeMd,
lineHeight: primitives.typographyLineHeightNormal,
marginTop: 8,
},
paragraphCenter: {
marginBottom: 8,
fontSize: primitives.typographyFontSizeMd,
lineHeight: primitives.typographyLineHeightNormal,
marginTop: 8,
},
paragraphWithImage: {
Expand Down Expand Up @@ -201,6 +199,16 @@ export const renderText = (params: RenderTextParams) => {
const styles: MarkdownStyle = {
...defaultMarkdownStyles,
...markdownStyles,
paragraph: {
Copy link
Contributor Author

@isekovanic isekovanic Feb 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@khushal87 as a note, if we have the time for this major I really really wanna get rid of renderText.

...(onlyEmojis ? {} : { lineHeight: primitives.typographyLineHeightNormal }),
...defaultMarkdownStyles.paragraph,
...markdownStyles?.paragraph,
},
paragraphCenter: {
...(onlyEmojis ? {} : { lineHeight: primitives.typographyLineHeightNormal }),
...defaultMarkdownStyles.paragraphCenter,
...markdownStyles?.paragraphCenter,
},
autolink: {
fontSize: primitives.typographyFontSizeMd,
lineHeight: primitives.typographyLineHeightNormal,
Expand Down Expand Up @@ -279,7 +287,7 @@ export const renderText = (params: RenderTextParams) => {
},
text: {
fontSize: primitives.typographyFontSizeMd,
lineHeight: primitives.typographyLineHeightNormal,
...(onlyEmojis ? {} : { lineHeight: primitives.typographyLineHeightNormal }),
...defaultMarkdownStyles.text,
color: colors.black,
...markdownStyles?.text,
Expand Down
16 changes: 13 additions & 3 deletions package/src/components/MessageInput/MessageInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,16 @@ const useStyles = () => {
} = useTheme();
return useMemo(() => {
return StyleSheet.create({
pollModalWrapper: {
alignItems: 'center',
flex: 1,
justifyContent: 'center',
backgroundColor: semantics.backgroundElevationElevation1,
},
pollSafeArea: {
flex: 1,
backgroundColor: semantics.backgroundElevationElevation1,
},
container: {
alignItems: 'center',
flexDirection: 'row',
Expand Down Expand Up @@ -454,14 +464,14 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
</Animated.View>

{showPollCreationDialog ? (
<View style={{ alignItems: 'center', flex: 1, justifyContent: 'center' }}>
<View style={styles.pollModalWrapper}>
<Modal
animationType='slide'
onRequestClose={closePollCreationDialog}
visible={showPollCreationDialog}
>
<GestureHandlerRootView style={{ flex: 1 }}>
<SafeAreaViewWrapper style={{ flex: 1 }}>
<GestureHandlerRootView style={styles.pollSafeArea}>
<SafeAreaViewWrapper style={styles.pollSafeArea}>
<CreatePoll
closePollCreationDialog={closePollCreationDialog}
CreatePollContent={CreatePollContent}
Expand Down
Loading