stream-chat-android-compose/io.getstream.chat.android.compose.ui.theme

Package-level declarations

Types

data class AttachmentPickerTheme(val backgroundOverlay: Color, val backgroundSecondary: Color, val backgroundPrimary: Color)

Represents the theming for the attachment picker.

ChatTheme

object ChatTheme

Contains ease-of-use accessors for different properties used to style and customize the app look and feel.

ComponentOffset

data class ComponentOffset(val x: Dp, val y: Dp)

Represents the offset of a component.

ComponentPadding

data class ComponentPadding(val start: Dp = 0.dp, val top: Dp = 0.dp, val end: Dp = 0.dp, val bottom: Dp = 0.dp)

Represents the padding of a component.

ComponentSize

data class ComponentSize(val width: Dp, val height: Dp)

Represents the size of a component.

ComposerCancelIconStyle

data class ComposerCancelIconStyle(val backgroundShape: Shape, val backgroundColor: Color, val painter: Painter, val tint: Color)

Represents the theming for the cancel icon used in the message composer.

ComposerInputFieldTheme

data class ComposerInputFieldTheme(val borderShape: Shape, val backgroundColor: Color, val textStyle: TextStyle, val cursorBrushColor: Color)

Represents the theming for the input field in the message composer.

ComposerLinkPreviewTheme

data class ComposerLinkPreviewTheme(val imageSize: ComponentSize, val imageShape: Shape, val imagePadding: Dp, val separatorSize: ComponentSize, val separatorMarginStart: Dp, val separatorMarginEnd: Dp, val title: TextComponentStyle, val titleToSubtitle: Dp, val subtitle: TextComponentStyle, val cancelIcon: ComposerCancelIconStyle)

Represents the theming for the link preview in the message composer.

IconContainerStyle

data class IconContainerStyle(val size: ComponentSize, val padding: ComponentPadding, val icon: IconStyle)

Represents the styling for the icon container component.

IconStyle

data class IconStyle(val painter: Painter, val tint: Color, val size: ComponentSize)

Represents the styling for the icon component.

MessageBackgroundShapes

data class MessageBackgroundShapes(val top: Shape, val middle: Shape, val bottom: Shape, val none: Shape)

Represents the shapes for the message background in different positions.

MessageComposerTheme

data class MessageComposerTheme(val attachmentCancelIcon: ComposerCancelIconStyle, val linkPreview: ComposerLinkPreviewTheme, val inputField: ComposerInputFieldTheme, val audioRecording: AudioRecordingTheme, val attachmentsPreview: AttachmentsPreviewTheme)

Represents the theming for the message composer.

MessageDateSeparatorTheme

@Immutable

data class MessageDateSeparatorTheme(val textStyle: TextStyle, val backgroundColor: Color)

Represents message date separator theming.

MessageOptionsTheme

@Immutable

data class MessageOptionsTheme(val optionVisibility: MessageOptionItemVisibility)

Represents the theme for the message option list in the selected message menu. For reaction option list theming, see ReactionOptionsTheme.

MessageTheme

@Immutable

data class MessageTheme(val textStyle: TextStyle, val contentPadding: ComponentPadding, val backgroundColor: Color, val backgroundBorder: BorderStroke?, val backgroundShapes: MessageBackgroundShapes, val quotedTextStyle: TextStyle, val quotedBackgroundColor: Color, val deletedBackgroundColor: Color, val audioRecording: AudioRecordingAttachmentTheme, val quoted: QuotedMessageStyle, val poll: PollMessageStyle)

Represents message theming.

MessageUnreadSeparatorTheme

@Immutable

data class MessageUnreadSeparatorTheme(val textStyle: TextStyle, val backgroundColor: Color)

Represents message unread separator theming.

ReactionOptionsTheme

@Immutable

data class ReactionOptionsTheme(val areReactionOptionsVisible: Boolean)

Represents the theme for the reaction option list in the selected message menu. For message option list theming, see MessageOptionsTheme.

StreamColors

@Immutable

data class StreamColors(val textHighEmphasis: Color, val textHighEmphasisInverse: Color, val textLowEmphasis: Color, val disabled: Color, val borders: Color, val inputBackground: Color, val appBackground: Color, val barsBackground: Color, val linkBackground: Color, val overlay: Color, val overlayDark: Color, val primaryAccent: Color, val errorAccent: Color, val infoAccent: Color, val highlight: Color, val ownMessagesBackground: Color, val otherMessagesBackground: Color, val deletedMessagesBackground: Color, val giphyMessageBackground: Color, val threadSeparatorGradientStart: Color, val threadSeparatorGradientEnd: Color, val mediaShimmerBase: Color, val mediaShimmerHighlights: Color, val ownMessageText: Color = textHighEmphasis, val otherMessageText: Color = textHighEmphasis, val imageBackgroundMessageList: Color, val imageBackgroundMediaGalleryPicker: Color, val videoBackgroundMessageList: Color, val videoBackgroundMediaGalleryPicker: Color, val showMoreOverlay: Color, val showMoreCountText: Color, val ownMessageQuotedBackground: Color = otherMessagesBackground, val otherMessageQuotedBackground: Color = ownMessagesBackground, val ownMessageQuotedText: Color = textHighEmphasis, val otherMessageQuotedText: Color = textHighEmphasis)

Contains all the colors in our palette. Each color is used for various things an can be changed to customize the app design style.

StreamDimens

@Immutable

data class StreamDimens(val channelItemVerticalPadding: Dp, val channelItemHorizontalPadding: Dp, val channelAvatarSize: Dp, val selectedChannelMenuUserItemWidth: Dp, val selectedChannelMenuUserItemHorizontalPadding: Dp, val selectedChannelMenuUserItemAvatarSize: Dp, val attachmentsContentImageWidth: Dp, val attachmentsContentGiphyWidth: Dp, val attachmentsContentGiphyHeight: Dp, val attachmentsContentLinkWidth: Dp, val attachmentsContentFileWidth: Dp, val attachmentsContentFileUploadWidth: Dp, val attachmentsContentUnsupportedWidth: Dp, val threadSeparatorVerticalPadding: Dp, val threadSeparatorTextVerticalPadding: Dp, val messageOptionsItemHeight: Dp, val suggestionListMaxHeight: Dp, val suggestionListPadding: Dp, val suggestionListElevation: Dp, val mentionSuggestionItemHorizontalPadding: Dp, val mentionSuggestionItemVerticalPadding: Dp, val mentionSuggestionItemAvatarSize: Dp, val commandSuggestionItemHorizontalPadding: Dp, val commandSuggestionItemVerticalPadding: Dp, val commandSuggestionItemIconSize: Dp, val threadParticipantItemSize: Dp, val userReactionsMaxHeight: Dp, val userReactionItemWidth: Dp, val userReactionItemAvatarSize: Dp, val userReactionItemIconSize: Dp, val reactionOptionItemIconSize: Dp, val headerElevation: Dp, val messageItemMaxWidth: Dp, val quotedMessageTextVerticalPadding: Dp, val quotedMessageTextHorizontalPadding: Dp, val quotedMessageAttachmentPreviewSize: Dp, val quotedMessageAttachmentTopPadding: Dp, val quotedMessageAttachmentBottomPadding: Dp, val quotedMessageAttachmentStartPadding: Dp, val quotedMessageAttachmentEndPadding: Dp, val quotedMessageAttachmentSpacerHorizontal: Dp, val quotedMessageAttachmentSpacerVertical: Dp, val groupAvatarInitialsXOffset: Dp, val groupAvatarInitialsYOffset: Dp, val attachmentsPickerHeight: Dp, val attachmentsSystemPickerHeight: Dp, val attachmentsContentImageMaxHeight: Dp, val attachmentsContentGiphyMaxWidth: Dp = attachmentsContentGiphyWidth, val attachmentsContentGiphyMaxHeight: Dp = attachmentsContentGiphyHeight, val attachmentsContentVideoMaxHeight: Dp, val attachmentsContentMediaGridSpacing: Dp, val attachmentsContentVideoWidth: Dp, val attachmentsContentGroupPreviewWidth: Dp, val attachmentsContentGroupPreviewHeight: Dp, val pollOptionInputHeight: Dp)

Contains all the dimens we provide for our components.

StreamRippleConfiguration

class StreamRippleConfiguration(val color: Color, val rippleAlpha: RippleAlpha)

Configuration for customizing the ripple effect on the composable components.

StreamShapes

@Immutable

data class StreamShapes(val avatar: Shape, val myMessageBubble: Shape, val otherMessageBubble: Shape, val inputField: Shape, val attachment: Shape, val imageThumbnail: Shape, val bottomSheet: Shape, val suggestionList: Shape, val attachmentSiteLabel: Shape, val header: Shape, val quotedAttachment: Shape, val pollOptionInput: Shape)

Contains all the shapes we provide for our components.

StreamTypography

@Immutable

data class StreamTypography(val title1: TextStyle, val title3: TextStyle, val title3Bold: TextStyle, val body: TextStyle, val bodyItalic: TextStyle, val bodyBold: TextStyle, val footnote: TextStyle, val footnoteItalic: TextStyle, val footnoteBold: TextStyle, val captionBold: TextStyle, val tabBar: TextStyle, val singleEmoji: TextStyle, val emojiOnly: TextStyle)

Contains all the typography we provide for our components.

TextComponentStyle

data class TextComponentStyle(val color: Color, val style: TextStyle, val maxLines: Int = Int.MAX_VALUE, val overflow: TextOverflow = TextOverflow.Clip)

Represents the styling for the text component.

TextContainerStyle

data class TextContainerStyle(val size: ComponentSize, val padding: ComponentPadding, val backgroundColor: Color, val textStyle: TextStyle)

Represents the styling for the text component.

WaveformSliderLayoutStyle

data class WaveformSliderLayoutStyle(val height: Dp, val style: WaveformSliderStyle)

Represents the style for the waveform slider layout.

WaveformSliderStyle

data class WaveformSliderStyle(val thumbStyle: WaveformThumbStyle, val trackerStyle: WaveformTrackStyle)

Represents the style for the waveform slider.

WaveformThumbStyle

data class WaveformThumbStyle(val widthDefault: Dp, val widthPressed: Dp, val backgroundColor: Color, val backgroundShape: Shape, val borderColor: Color, val borderShape: Shape, val borderWidth: Dp)

Represents the style for the waveform thumb.

WaveformTrackStyle

data class WaveformTrackStyle(val passedColor: Color, val futureColor: Color, val minBarHeight: Dp, val barSpacingRatio: Float)

Represents the style for the waveform track.

Functions

ChatTheme

@Composable

fun ChatTheme(isInDarkMode: Boolean = isSystemInDarkTheme(), autoTranslationEnabled: Boolean = false, isComposerLinkPreviewEnabled: Boolean = false, useDefaultSystemMediaPicker: Boolean = false, colors: StreamColors = if (isInDarkMode) StreamColors.defaultDarkColors() else StreamColors.defaultColors(), dimens: StreamDimens = StreamDimens.defaultDimens(), typography: StreamTypography = StreamTypography.defaultTypography(), shapes: StreamShapes = StreamShapes.defaultShapes(), rippleConfiguration: StreamRippleConfiguration = StreamRippleConfiguration.defaultRippleConfiguration( contentColor = LocalContentColor.current, lightTheme = !isInDarkMode, ), attachmentFactories: List<AttachmentFactory> = StreamAttachmentFactories.defaultFactories(), attachmentPreviewHandlers: List<AttachmentPreviewHandler> = AttachmentPreviewHandler.defaultAttachmentHandlers(LocalContext.current), quotedAttachmentFactories: List<AttachmentFactory> = StreamAttachmentFactories.defaultQuotedFactories(), reactionIconFactory: ReactionIconFactory = ReactionIconFactory.defaultFactory(), reactionOptionsTheme: ReactionOptionsTheme = ReactionOptionsTheme.defaultTheme(), messagePreviewIconFactory: MessagePreviewIconFactory = MessagePreviewIconFactory.defaultFactory(), pollSwitchItemFactory: PollSwitchItemFactory = DefaultPollSwitchItemFactory(context = LocalContext.current), allowUIAutomationTest: Boolean = false, dateFormatter: DateFormatter = DateFormatter.from(LocalContext.current), timeProvider: TimeProvider = TimeProvider.DEFAULT, channelNameFormatter: ChannelNameFormatter = ChannelNameFormatter.defaultFormatter(LocalContext.current), messagePreviewFormatter: MessagePreviewFormatter = MessagePreviewFormatter.defaultFormatter( context = LocalContext.current, typography = typography, attachmentFactories = attachmentFactories, autoTranslationEnabled = autoTranslationEnabled, ), searchResultNameFormatter: SearchResultNameFormatter = SearchResultNameFormatter.defaultFormatter(), imageLoaderFactory: StreamCoilImageLoaderFactory = StreamCoilImageLoaderFactory.defaultFactory(), imageHeadersProvider: ImageHeadersProvider = DefaultImageHeadersProvider, imageAssetTransformer: ImageAssetTransformer = DefaultImageAssetTransformer, messageAlignmentProvider: MessageAlignmentProvider = MessageAlignmentProvider.defaultMessageAlignmentProvider(), messageOptionsTheme: MessageOptionsTheme = MessageOptionsTheme.defaultTheme(), messageOptionsUserReactionAlignment: MessageOptionsUserReactionAlignment = MessageOptionsUserReactionAlignment.END, attachmentsPickerTabFactories: List<AttachmentsPickerTabFactory> = if (useDefaultSystemMediaPicker) { AttachmentsPickerTabFactories.defaultFactoriesWithoutStoragePermissions() } else { AttachmentsPickerTabFactories.defaultFactories() }, videoThumbnailsEnabled: Boolean = true, streamCdnImageResizing: StreamCdnImageResizing = StreamCdnImageResizing.defaultStreamCdnImageResizing(), readCountEnabled: Boolean = true, ownMessageTheme: MessageTheme = MessageTheme.defaultOwnTheme( isInDarkMode = isInDarkMode, typography = typography, shapes = shapes, colors = colors, ), otherMessageTheme: MessageTheme = MessageTheme.defaultOtherTheme( isInDarkMode = isInDarkMode, typography = typography, shapes = shapes, colors = colors, ), messageDateSeparatorTheme: MessageDateSeparatorTheme = MessageDateSeparatorTheme.defaultTheme( typography = typography, colors = colors, ), messageUnreadSeparatorTheme: MessageUnreadSeparatorTheme = MessageUnreadSeparatorTheme.defaultTheme( typography = typography, colors = colors, ), messageComposerTheme: MessageComposerTheme = MessageComposerTheme.defaultTheme( isInDarkMode = isInDarkMode, typography = typography, shapes = shapes, colors = colors, ), attachmentPickerTheme: AttachmentPickerTheme = AttachmentPickerTheme.defaultTheme(colors), messageTextFormatter: MessageTextFormatter = MessageTextFormatter.defaultFormatter( autoTranslationEnabled = autoTranslationEnabled, typography = typography, shapes = shapes, colors = colors, ownMessageTheme = ownMessageTheme, otherMessageTheme = otherMessageTheme, ), quotedMessageTextFormatter: QuotedMessageTextFormatter = QuotedMessageTextFormatter.defaultFormatter( autoTranslationEnabled = autoTranslationEnabled, context = LocalContext.current, typography = typography, shapes = shapes, colors = colors, ownMessageTheme = ownMessageTheme, otherMessageTheme = otherMessageTheme, ), streamMediaRecorder: StreamMediaRecorder = DefaultStreamMediaRecorder(LocalContext.current), content: @Composable () -> Unit)

Our theme that provides all the important properties for styling to the user.