Theme

The Theme controls the visual aesthetic of your app. FlutterFlow allows you to change app colors, set dark and light mode themes, and set text styles (Typography) for your app. You can also upload the Custom fonts and icons to make your app match your brand design.
The colors, fonts, and icons added to the theme will be available for use throughout your app.
This page walks you through:
​Creating your color themes​
​Define Text Styles (Typography/Fonts)​
​Adding Custom Fonts​
​Adding Custom Icons​
Creating your color themes
​Create a light mode theme​
​Create a dark mode theme​
​Preview how colors will look in your app​
​Use theme colors in your app​
Create a light mode theme
Each theme includes 8 standard colors (e.g. Primary, Secondary, Primary Background, Primary Text, etc.). You can also add your own Colors. 
Changes made to your theme colors will automatically update at every place where this color is used in your app.
There are 3 ways to add colors to your project:
1.Theme settings
2.From existing project
3.From Coolors
1. Theme Settings
To update an existing color, select the color you want to edit and then use the color picker or enter your color value (e.g. Hex).
To add a new color, select Add Color button, choose the color using the color picker or define its Hex value and click Use Selected Color. You can also edit the name of the custom color to give it an appropriate name.
Add color inside theme settings
2. From existing project
FlutterFlow can find the commonly used colors in your app and allows you to accept/reject the color as part of your color Theme.
To add existing colors to your theme, scroll down and select Preview Themes and then select Find Common Colors and select Continue.
Select the green checkmark to accept (add) a color. You can then define this as a Theme or Custom color and name the color.
To reject a color, click on the cancel icon (x).
Add color from existing project
3. From Coolors
Go to the coolors.co, identify the palette you would like to add, click on the options menu (three dots), and then click on the Export palette.
Now, select the Code, and then copy the contents below the /* Object */ section.
Open your FlutterFlow project, and click on the Setting and Integrations (
) from the Navigation Menu (left side of your screen).
Select the General tab and then select Theme.
Click on the Import from Coolors button. This will open a new popup window.
Paste the copied content and then click Import. New colors will be displayed under the Custom Colors section.
Add color from coolors
Create a dark mode theme
To enable the Dark Mode theme for your app, click on the Setting and Integrations (
) from the Navigation Menu (left side of your screen) and enable Dark Mode Theme.  You can then update the colors as you did for Light Mode.
Dark Mode will automatically be applied based on a user's phone settings. You can also create an action to allow a user to manually switch between light and dark mode:
Set Dark Mode Setting
Preview how colors will look in your app
There are two ways you can preview a theme:
1.Inside theme settings
2.Inside App Builder
1. Inside theme settings
Click on the Setting and Integrations (
) from the Navigation Menu (left side of your screen).
Select the General tab and then select Theme.
Click on the Preview Theme button. This will open a new popup window.
Select your Page from the left side dropdown menu.
Toggle the Day and Night switch (
) to change and preview the theme.
Preview color inside theme setting
2. Inside App Builder 
Click Select Page Or Component (
) from the Navigation Menu (left side of your screen).
Select a page.
Click on the Switch to Dark Mode(
)/Switch to Light Mode(
) button at the top.
Preview color inside app builder
Use theme colors in your app
Colors added to your Theme Colors will be easily available for use in the UI Builder.
Here you can see how Theme Colors can be used:
Using theme colors
Define Text Styles (Typography/Fonts)
You can customize the Text Styles used by your project from this section. It lets you customize the following properties of each style name:
Font Weight - choose the font weight among Thin, Extra Light, Light, Normal, Medium, Semi Bold, Bold, Extra Bold & Black.
Font Size - use this field to specify the size of the text.
Letter Spacing - use this field to set the space between characters.
Font Style - checkbox for enabling Italic font style.
Color - set the color of the text using either the color picker or by specifying a Hex value.
Font Family - you can change the Font Family for any style from here. click here to set the font family from Google Fonts or choose from the uploaded Custom Fonts. You can also choose whether this style is Primary or Secondary Font Family. The Primary Font Family is the font that you will use the most throughout your app. The Secondary Font Family is the font that you will use to serve slight variation or contrast to the primary font. To change the Primary or Secondary Font Family see the options at the top right side of the Typography section.
Defining text styles
Adding responsive text styles
When you run the app on a different platform (other than mobile) such as a tablet, web, or desktop, you might find that the texts are displayed small in size. Technically the font size is the same but due to the increased screen resolution, it looks small. To overcome this situation, you can add responsive text. That means adding different font sizes for the different platforms. 
See how the texts are displayed with and without responsive font style:
With responsive Text
Without responsive text
In FlutterFlow, you can add the responsive style by following the instructions below:
Click on the Setting and Integrations (
) from the Navigation Menu (left side of your screen).
Select the General tab and then select Theme.
Scroll down to the Typography section.
Click on the Make Responsive button.
Now, all the styles are available under the three tabs. Mobile, Tablet and Desktop. Modify each style under the different platform tabs that you are supporting.
Run the app and see how the texts are displayed by changing the platform.
Adding responsive style
Adding Custom Fonts
Adding Custom Fonts to your app makes it stand out from others. The Custom Fonts section allows you to upload your own fonts. You can upload the custom fonts files of types .ttf, .otf, and .woff Once the font is uploaded, you can use it directly from the widget or add it to the text style section to create a general theme.
Before you upload the Custom Fonts, make sure you have the right to use the font in your application.
To add the Custom Fonts:
Click on the Setting and Integrations (
) from the Navigation Menu (left side of your screen).
Select the General tab and then select Theme.
Scroll down to the Custom Fonts section.
Click on the + Add Font button.
Enter the Font Family Name and click on the Upload File(s) button.
Select and upload your font.
Click Add Font. The newly added font will be displayed.
To use a custom font directly in a Text widget, move to the property editor, click on the already applied font family, select the Custom Fonts tab and then choose the font.
To use a custom font for common text style, open the Text Styles section, click on the already applied font family, select the Custom Fonts tab and then choose the font.
Adding Custom Fonts
Adding Custom Icons
Adding Custom Icons to your app helps you build the brand identity. Before you add the Custom Icons in FlutterFlow, you need to generate them from any icon generations site (like fluttericon and iconmoon) and export them using appropriate settings. 
Make sure you have the right to use the icons in your application.
To add custom icons:
Head over to the iconmoon.
Import your custom icon (.svg) or select from the free icons set.
Select the Generate Font tab.
Click on the Settings button (gear icon) beside the download text on the bottom right side.
Enable Generate Dart class for Flutter.
Click on the Download button and then extract the downloaded file.
Open your FlutterFlow project, and click on the Setting and Integrations (
) from the Navigation Menu (left side of your screen).
Select the General tab and then select Theme.
Scroll down to the Custom Icons section.
Click on the + Add Icons button.
Click on the Upload Icon File button.
Select and upload .ttf file under the downloaded folder > fonts.
Now click on the Upload Icon Info button.
Select and upload the filename.dart under the downloaded folder (besides the fonts folder).
Click Add Icons.
To use a custom icon, add the Icon widget either by dragging it from the Base Elements tab (in the Widget Panel) or directly from the widget tree. 
Move to the Property Editor (on the right side of your screen) and scroll down to the Icon section. 
Click on the Settings Outlined button, select the Custom Icons tab and then select your icon.
Adding Custom Icons

Settings and Integrations - Previous

General Settings

NavBar & AppBar

Last modified 23d ago

Copy link

Outline

Creating your color themes

Create a light mode theme

Create a dark mode theme

Preview how colors will look in your app

Use theme colors in your app

Define Text Styles (Typography/Fonts)

Adding responsive text styles

Adding Custom Fonts

Adding Custom Icons