Colors

This section allows you to customize the colors of your app, giving you control over the visual appearance of your application. From here, you can configure colors for both light and dark themes. Additionally, you can preview existing theme colors, import colors from Coolors, and even extract colors from images.

Add or replace color

By default, we add 16 predefined colors for light and dark themes. However, you might want to add a new color or replace the existing color to align better with your brand identity.

To add a new color:

1. Click Add Color button.

2. The new color will be added as Custom Color. Click on it and enter the Hex color value.

3. You can also edit the name of the custom color.

4. Click Use Color.

Add new color

To update an existing color in a light and dark mode theme, click on the color and enter the hex color value.

Replace color

---

Explore Project Colors

We allow you to browse through the commonly used colors in your app and some pre-defined color schemes that might align with your app branding.

To do so:

1. Click on the Explore Project Colors.

2. Select page you want to preview.

3. To find common colors, scroll down and click Find Common Colors. This will list out all the colors being used in the app. Use the 'done' and 'cancel' icons to accept or reject colors.

4. To explore the pre-defined color schemes, switch to the Explore tab, scroll through all the schemes, and tick to see the preview.

5. Click the 'refresh' button to get back to the original theme.

6. To proceed further, click Save Changes.

Explore Project Colors

---

Import from Coolors

Importing colors from Coolors website is a quick and easy way to add your preferred color scheme to your app. Coolors offers a vast library of color palettes that you can import with just a few clicks, saving you time and effort in creating your own custom color palette.

To import from Coolors:

1. 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.

2. Now, select the Code, and then copy the contents below the /* Object */ section.

3. Open your project, and navigate to Theme Settings > Colors.

4. Click on the Import from Coolors button. This will open a new popup window.

5. Paste the copied content and then click Import. New colors will be displayed under the Custom Colors section.

Import from Coolors

---

Extract from Image

This feature provides an easy way to create visually striking themes by utilizing the colors present in an image. You can generate a color palette that harmonizes perfectly with the colors in the image, resulting in stunning designs that capture the essence of your image.

To extract and use color from the image:

1. Navigate to Theme Settings > Colors.

2. Click the Extract from Image button and select the image.

3. A pop-up will appear that displays the extracted color from the image. To proceed further, click Extract & Continue.

4. In the next step, click on any color to see and select the extracted color.

5. Click Done.

Extract from Image

---

AI Generated Theme Colors

See how to use AI Generated theme colors.

---

Action to change light or dark theme

The light or dark mode is usually applied based on a user's phone settings. However, you can also provide an option for users to manually switch between the two modes. This can be achieved by adding the following action.

pageSet Dark Mode Setting

---

Video guide

If you prefer watching a video tutorial, here's the one for you:

---

Last Updated Date: September 4, 2023