Comment on page
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.
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:
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.
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
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:
- 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
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
With 'AI Gen Theme,' simply describe the desired color theme for your app; for example, 'Tiger in the Jungle' or 'Kids bedtime story' and watch as a comprehensive color scheme tailored to your needs magically appears.
AI Generated Theme Colors
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.
If you prefer watching a video tutorial, here's the one for you:
Last Updated Date: September 4, 2023