Set Color Scheme for Whole Store

What’s Color Schemes?

The Color Schemes feature resides within the theme settings. It allows you to curate a variety of color combinations and seamlessly apply them across different sections of your website through the Color Scheme Picker.

The video below is an example of the convenience offered by the Color Scheme feature:

1. I can switch to Light Mode with just one click.
2. I can easily color-coordinate the elements on the website based on a predefined color palette.
3. In case I want to change the color palette, I simply need to re-setup the colors in the Color Scheme, rather than having to change the colors for each individual website component.

Next, I will guide you step-by-step on how to set up the Color Scheme.

Setting Up a Color Scheme

In this section, we will explore the following topics:

1. The two components in the Color Scheme.
2. What are Color Primary, Color Secondary, Color Tertiary, and Color Quaternary?
3. What are the Darkest Color and Lightest Color?
4. How to set up Dark Mode.
   Understanding these aspects will assist you in setting up an appropriate Color Scheme for your website.

Two components in the Color Scheme

1. The first color component consists of the settings for the following colors in sequence: Color Primary, Color Secondary, Color Tertiary, and Color Quaternary.
2. The second color component is typically used for the text color on a page.

Color Primary, Color Secondary, Color Tertiary, and Color Quaternary?

Color Primary

Color Primary doesn’t necessarily mean the color that’s used the most on your website.

Color Primary is often used to emphasize components that you want customers to pay attention to, such as highlight features of product, add to cart button, view more button. You can also use your brand color as the primary color.

Secondary Color Color

In cases where there are multiple elements you want users to notice placed side by side, you can alternate between Secondary and Primary colors. This helps enhance the user experience.

For example: When I activate the ‘Buy it now’ button, you’ll notice that the color of the ‘Add To Cart’ and ‘Buy it Now’ buttons are the same. Since the functions of the two buttons are different, I will adjust the color of the ‘Add to Cart’, ‘Favorite’, and ‘Compare’ button group above.

Color Tertiary, and Color Quaternary

Color Tertiary and Color Quaternary serve similar functions to Color Secondary. They complement the primary color and enhance the user experience. Typically, we use two main colors on a website: Color Primary and Color Secondary.

What does The Darkest Color and Lightest Color do in Veda Page?

For a quick explanation, when you’re using the Light Mode the Darkest Color are Text Color and the Lightest Color are the background color of your page and vi versa when you’re using dark mode

How to set up Dark Mode?

In Veda Color Scheme, there are always two variants: Light Mode and Dark Mode. To set up Dark Mode, please follow the instructions below:

Tips: You can use Color wheel that provided by Canva to find the colors for your site.