How to Create a Custom Theme for Your FlutterFlow App

Click the paintbrush icon in the left Navigation Menu to open Theme Settings. Under Colors, you will see slots for Primary, Secondary, Tertiary, Alternate, Background, Surface, and Error. Click each color swatch and enter your hex code. For Primary, use your main brand color. For Background, use your page background. For Surface, use the color for cards and elevated elements. For Error, keep a red tone for validation messages. Each color also has a light variant — set this to a lighter shade of the same hue for hover states and subtle backgrounds.

Still in Theme Settings, switch to the Typography tab. FlutterFlow provides named styles from Display Large down to Body Small. For each style, set the Font Family (click to search Google Fonts or select your uploaded custom font), font size (in pixels), font weight (Regular 400, Medium 500, SemiBold 600, Bold 700), and letter spacing. A common starting point: Headline Large at 32px Bold, Headline Small at 20px SemiBold, Body Medium at 16px Regular, Body Small at 14px Regular.

Navigate to any page and select a widget — for example, a Button. In the Properties Panel, click the color field for the button background. Switch to the Theme Color tab in the color picker and select Primary. For a Text widget, click the text style dropdown and select a Theme typography style like Headline Small or Body Medium. Now these widgets automatically update when you change the Theme values.

In Theme Settings, click the Dark Mode toggle to enable it. FlutterFlow creates a duplicate color palette for dark mode. Update each dark mode color: swap your light Background (#FFFFFF) for a dark one (#121212), swap Surface to a dark elevated color (#1E1E1E), and adjust Primary to a lighter shade if needed for contrast on dark backgrounds. Typography remains the same — only colors change between light and dark modes.

When writing Custom Widgets or Custom Actions, access your theme programmatically. Use FlutterFlowTheme.of(context).primary for the primary color, FlutterFlowTheme.of(context).bodyMedium for body text style, and FlutterFlowTheme.of(context).bodyMediumFamily for the font family name. This keeps your Custom Code consistent with the visual builder's theme settings.

1// Access theme colors
2final primaryColor = FlutterFlowTheme.of(context).primary;
3final backgroundColor = FlutterFlowTheme.of(context).primaryBackground;
4
5// Access typography
6final headingStyle = FlutterFlowTheme.of(context).headlineSmall;
7final bodyStyle = FlutterFlowTheme.of(context).bodyMedium;
8
9// Example usage in a widget
10Text(
11  'Hello World',
12  style: FlutterFlowTheme.of(context).headlineSmall.override(
13    fontFamily: FlutterFlowTheme.of(context).headlineSmallFamily,
14    color: FlutterFlowTheme.of(context).primary,
15  ),
16);