Skip to main content

Change App Colors

important

If you are using

  • WooStore Pro application version v1.11.0 or above
  • WooStore Pro Api wordpress plugin version v2.1.0 or above

you can install the Variation Swatches for Woocommerce wordpress plugin to add color and image type of attributes for your products. If you follow the above, you can skip the following color settings as the colors will be fetched from Variation Swatches for Woocommerce color type attribute settings.

Follow the guide from here: Variation Swatches for WooCommerce

In this guide you will learn how to change the application colors to configure the application with your brand. Please read the instructions below to see which color values you can use in the application and how to edit the application file to do so.

Where to edit color values#

All the colors in the application are defined in the colors.dart file. This file is located in woostore_pro / lib / themes / colors.dart.

All the colors are defined in a class AppColors. You can edit all the color values in this class however you should stick to the below mentioned names to change the application's color values.

You can define the color used in the light as well as the dark themes separately. You can use different values for both light and dark themes.

  • primary = Color(0xFF497FF3);
  • primaryDark = Colors.green;
  • secondary = Color(0xFF0CA8B0);
  • secondaryDark = Color(0xFF0CA8B0);
  • tabbar = Color(0xFF24AAF0);
  • tabbarDark = Color(0xFF66BB6A);
  • accent = Color(0xFF24AAF0);
  • accentDark = Color(0xFF66BB6A);
  • buttonColor = Color(0xFF24AAF0);
  • buttonColorDark = Color(0xFF24AAF0);
  • buttonHighlightColor = Color(0xFF7EA5FF);
  • buttonHighlightColorDark = Color(0xFF7EA5FF);
  • buttonSplashColor = Color(0xFF7EA5FF);
  • buttonSplashColorDark = Color(0xFF7EA5FF);
  • productItemCardOnSaleBanner
  • productItemCardOnSaleBannerDark

You can watch the tutorial video on how each of the above values changes the application's colors from the link at the bottom.

Color Values#

In flutter you can use the predefined material colors which can be accessed using the pre-defined Colors class or Hex Value of a color.

Using Colors Class#

Color red = Colors.red

Using Hex Value#

The hex value of red is #FF0000. You can use this in the application by removing the '#' symbol and replacing the remaining 6 characters in Color(0xFF••••••)

For example:

Color red = Color(0xFFFF0000)

Video Tutorial#

You can watch the below linked video to know which values changes which application colors. The video first shows you which values changes which colors in the application and then proceeds to change the application colors. It also shows that you can use completely different colors in the dark theme mode as well.

Link: How to change the app colors