Please provide example documentation on light/dark custom theming

[philipmjohnson]

Our app has custom light and dark themes, and we are having problems theming our chat screens. Here is an example:

What you can see is that, in this "light" theme, there is a dark text bubble (which requires a white or near-white text font color for readability), as well as a message text field at the bottom (which requires a black or near-black text font color to be readable). We don't know how to control the Chat theme to have the right text font color depending upon the background. In the above case, the message text field font color makes it almost unreadable.

Here is all the documentation that we can find:

https://docs.flyer.chat/flutter/chat-ui/themes

We've also looked at the source code, but find it difficult to figure the appropriate approach.

It would really help us if you could provide a simple example to illustrate how to provide custom light and dark themes.

Or if there is someplace else we can look, please let us know.

[demchenkoalex]

Hello! I am currently working on v2 re-designing everything and already can say that the theme handling will be much more intuitive there, but until it is live I can only say the following:

1. The link to the documentation is a correct way to pass themes in v1, but it does not handle light/dark themes inside, so you will have to pass a theme based on a selected one, in theme param of a Chat widget. As docs mention, DefaultChatTheme is a light theme and DarkChatTheme is a dark one, and you can override style there based on your needs. I suppose you already passed inputBackgroundColor, and if you look at the implementation of the Input widget you will see some additional styles like inputTextDecoration, inputTextStyle and inputTextColor - all will be a properties in a theme class you pass to the theme param. Hopefully some combination of these will match your require styles. Unfortunately in v1 I did not make everything customisable, this is one of the problems I try to solve in v2.

2. As for the sent message I see you already used primaryColor and receivedMessageBodyTextStyle.

By the way do you prefer system similar to material like primary, onPrimary etc, or just plain text message theme, input theme etc?

[philipmjohnson]

@demchenkoalex Thanks for the quick reply! We will look into this.

[demchenkoalex]

v2 has dynamic light/dark theming, should be pretty easy to customise anything