Skip to content
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.

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

Apply light / dark theme to custom components #84

Merged
merged 1 commit into from
Feb 15, 2024
Merged

Conversation

AhyoungRyu
Copy link
Collaborator

Address https://sendbird.atlassian.net/browse/AC-1262

Most of color variation is being handled by UIKit side internally, but some of custom components(e.g. MessageBody) which have been created in the widget side are not. So I brought styled-component's ThemeProvider to apply the color variation based on the theme setting.

Light

Screenshot 2024-02-14 at 10 01 54 PM

Dark

Screenshot 2024-02-14 at 10 01 44 PM

@AhyoungRyu AhyoungRyu self-assigned this Feb 14, 2024
@AhyoungRyu AhyoungRyu changed the title Enable light / dark theme Apply light / dark theme to custom components Feb 14, 2024
@@ -3,6 +3,7 @@ import { GroupChannel } from '@sendbird/chat/groupChannel';
import { SendingStatus } from '@sendbird/chat/message';
import ChannelHeader from '@sendbird/uikit-react/Channel/components/ChannelHeader';
import ChannelUI from '@sendbird/uikit-react/Channel/components/ChannelUI';
// import SuggestedReplies from '@sendbird/uikit-react/Channel/components/SuggestedReplies';
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Commented since UIKit doesn't export the SuggestedReplies component yet.

@luke-cha
Copy link
Contributor

How to set the theme from <ChatAiWidget/>?

Copy link
Contributor

@luke-cha luke-cha left a comment

Choose a reason for hiding this comment

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

LGTM

@AhyoungRyu
Copy link
Collaborator Author

@luke-cha We'll get the theme info from the server directly so user doesn't need to set the theme via ChatAiWidget component prop.

@AhyoungRyu AhyoungRyu merged commit 8f61cc2 into develop Feb 15, 2024
@AhyoungRyu AhyoungRyu deleted the feat/dark-theme branch February 15, 2024 04:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants