UI Color & Theme

This section covers how to customize how Instabug appears in your app in order to match your design and brand palette for Flutter apps.

SDK Theme

The SDK UI has two color themes: light and dark.

You can set which theme to use with the following method:

Dart

Luciq.setColorTheme(ColorTheme.dark);

Here are the possible color themes:

Dart

ColorTheme.light
ColorTheme.dark

Setting the Primary Color

You can set the color of UI elements that indicate interactivity, like links, or a call to action, like buttons, using the following method:

Dart

Luciq.setPrimaryColor(Color.blue);

Advanced Theme Customization

For more granular control over the SDK's appearance, use the setTheme API to customize colors, text styles, and fonts.

Dart

Luciq.setTheme(ThemeConfig(
  primaryColor: '#FF6B6B',
  primaryTextColor: '#333333',
  secondaryTextColor: '#666666',
  titleTextColor: '#000000',
  backgroundColor: '#FFFFFF',
));

Color Options

Option	Description
primaryColor	Buttons, CTAs, and interactive highlights
primaryTextColor	Labels and form text
secondaryTextColor	Helper text and footnotes
titleTextColor	Screen and survey titles
backgroundColor	SDK container background

Text Style Options (Android Only)

You can customize text styles on Android using these options:

Dart

Luciq.setTheme(ThemeConfig(
  primaryTextStyle: 'bold',
  secondaryTextStyle: 'normal',
  ctaTextStyle: 'bold_italic',
));

Available values: normal, bold, italic, bold_italic

Custom Fonts

To use custom fonts, you must configure them in both your Flutter project and native platforms.

iOS Setup

1. Add your .ttf file to assets/fonts/ in your Flutter project.

2. Copy the font to your iOS project:

Bash

cp assets/fonts/YourFont.ttf ios/Runner/

1. Add the font to Xcode: Right-click Runner -> Add Files to Runner -> select your font file.

2. Register the font in ios/Runner/Info.plist:

XML

<key>UIAppFonts</key>
<array>
  <string>YourFont.ttf</string>
</array>

Android Setup

1. Add your .ttf file to assets/fonts/ in your Flutter project.

2. Create the assets directory and copy the font:

Bash

mkdir -p android/app/src/main/assets/fonts
cp assets/fonts/YourFont.ttf android/app/src/main/assets/fonts/

Applying the Font

Dart

Luciq.setTheme(ThemeConfig(
  primaryFontAsset: 'YourFont.ttf',
));

Note: The font must be properly registered in both native platforms for primaryFontAsset to work. Flutter assets alone are not sufficient.

Floating Button Position

If your invocation event is a floating button, you can set its position in your app. You can set the edge and the offset, which specify the position on the y-axis.

Dart

BugReporting.setFloatingButtonEdge(FloatingButtonEdge.right, 250);

Video Recording Button

If you've enabled video recordings as attachments, you can change the position of the red recording button displayed in the screenshot below. The default position of the button is bottom right.

Default position: bottom right

Use this method to set the position of the video recording button:

Dart

BugReporting.setVideoRecordingFloatingButtonPosition(Position.topLeft);

Here are the possible values:

Dart

Position.topLeft
Position.topRight
Position.bottomLeft
Position.bottomRight