Skip to main content

Theming

Getting Started with Theming​

The LikeMinds Chat SDK simplifies customizing the appearance of chat widgets. Similar to Flutter’s theming approach, it provides a dedicated class for managing chat themes.

With LMChatTheme, you can customize the look and feel of your chat UI by defining attributes through LMChatThemeData. It functions similarly to Flutter’s Theme and ThemeData, ensuring that your custom theme is applied globally across all chat components.

Detailed Overview of LMChatThemeData​

The LMChatThemeData class allows customization of the entire chat experience, covering everything from buttons to chat bubbles. Defining properties in LMChatThemeData ensures consistency across your application.

Factory Constructors for LMChatThemeData:​

factory LMChatThemeData.light({
    // Color-related properties
    Color? primaryColor,
    Color? backgroundColor,
    ...
    // Style-related properties
    LMChatButtonStyle? buttonStyle,
    LMChatIconStyle? iconStyle,
    ...
});
factory LMChatThemeData.dark({
    // Color-related properties
    Color? primaryColor,
    Color? backgroundColor,
    ...
    // Style-related properties
    LMChatButtonStyle? buttonStyle,
    LMChatIconStyle? iconStyle,
    ...
});
  • primaryColor: Sets the primary color for chat elements.
  • backgroundColor: Specifies the background color for the chat.
  • secondaryColor: Defines the secondary color used in the chat theme.
  • shadowColor: Sets the color of shadows in the UI.
  • disabledColor: Specifies the color of disabled elements.
  • errorColor: Defines the color used for error messages.
  • inActiveColor: Sets the color for inactive elements.
  • tagColor: Customizes the color of tags.
  • hashTagColor: Defines the color for hashtags.
  • linkColor: Specifies the color of hyperlinks.
  • scaffold: Sets the scaffold background color.
  • container: Background color of containers.
  • onContainer: Text color used within containers.
  • onPrimary: Color for text on primary elements.
  • buttonStyle: Defines the style for buttons in the chat.
  • iconStyle: Customizes the appearance of icons.
  • textFieldStyle: Specifies the appearance of text fields.
  • dialogStyle: Sets the style for dialogs.
  • popUpMenuStyle: Customizes the appearance of pop-up menus.
  • loaderStyle: Defines the style for loaders.
  • bottomSheetStyle: Customizes the style of bottom sheets.
  • snackBarTheme: Sets the style for snack bars.
  • imageStyle: Controls the appearance of images.
  • videoStyle: Sets the style for video elements.
  • documentStyle: Defines the appearance of document attachments.
  • gifStyle: Controls the style of GIFs.
  • bubbleStyle: Customizes the appearance of chat bubbles.
  • replyStyle: Defines the style for reply bubbles.
  • contentStyle: Specifies the content style within bubbles.
  • chatTileStyle: Sets the appearance of chat tiles.
  • stateBubbleStyle: Defines the appearance of state bubbles.
  • appBarStyle: Controls the style of app bars.
  • reactionBarStyle: Customizes the appearance of the reaction bar.
  • reactionBottomSheetStyle: Defines the style of the reaction bottom sheet.
  • bubbleReactionsStyle: Sets the style for bubble reactions.
  • reactionKeyboardStyle: Customizes the appearance of the reaction keyboard.
  • pollStyle: Controls the appearance of polls within the chat.

Applying Custom Themes in Your Application​

Here’s an example demonstrating how to apply a custom chat theme using LMChatThemeData. In this example, we modify the primary color, background color, and button style:

// Create an instance of LMChatThemeData using the light theme constructor
LMChatThemeData customChatTheme = LMChatThemeData.light(
  primaryColor: Colors.blue,  // Set primary color to blue
  backgroundColor: Colors.white,  // Set background color to white
  buttonStyle: LMChatButtonStyle.basic().copyWith(
    backgroundColor: Colors.blue,
    textStyle: TextStyle(color: Colors.white),
  ),
);

// Initialize the LikeMinds Chat SDK with the custom theme
void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // Initialize LikeMinds Chat SDK with the theme
  await LMChatCore.instance.initialize(
    theme: customChatTheme,
  );

  runApp(MyApp());
}

Changing Fonts​

The LikeMinds Chat SDK uses the font defined in your MaterialApp’s ThemeData by default. To apply a custom font throughout the chat UI, configure the font family in your MaterialApp. This ensures consistency across all text elements in the chat interface.

Refer to the Flutter official documentation for detailed guidance on customizing fonts in your application.

Using your Existing ThemeData​

If you have an existing ThemeData object, you can use it to initialize the LMChatThemeData object. This allows you to maintain consistency between your existing theme and the chat theme.

LMChatThemeData customChatTheme = LMChatThemeData.fromThemeData(YourThemeData());

Using Dark Theme​

To use the dark theme, you can use the LMChatThemeData.dark() constructor.

LMChatThemeData customChatTheme = LMChatThemeData.dark();

Then you can initialize the SDK with the dark theme.

await LMChatCore.instance.initialize(
  theme: customChatTheme,
);

Or you can use the setter method to change the theme dynamically.

LMChatTheme.setTheme(customChatTheme);