Updating Color Scheme

Setting Color from the defined Colors:

Wieldy comes with a lot of predefined color combinations. You can set the default color combination of your choice by following simple steps. To set the default color combination, you need to go to the following file:-

src/appRedux/reducers/Settings.js

In this file, you can look for "themeColor" property and set its value as per your choice. List of available options can be found at:-

src/constants/ThemeColors.js

Adding New Color:

For Source Folder:

In order to add new color, you need to go to styles folder as it contains all the style and color related files. Style folder can be found at src/styles/

then, inside this styles/ folder, there is a file variables.less.

In this file you will find theme color variables as specified in below screenshot. You can change their values to the ones you want those to be.

Specifically for Source Folder:-

If you are working in the source folder, then you need to follow some additional steps to add the new color to the template:-

If you have updated a single color in variable.less file then after updating you need to run a command:-

yarn less

and the process is done.

However, if you want to change multiple colors, then you have to first update the variable.less file.

After that, you need to go to the package.json file. In that file, you will find the scripts property at the top of the file, a screenshot of the same is attached below.

In the scripts property, you can see a "less" command highlighted in the image. In that command, you need to change the file name highlighted in the green box with the color name that you have updated.

For example, if you have updated the blue color, then the command would become:

"less": "lessc --js styles/wieldy.less styles/blue.css --compress -x"

and after that you need to run a command:

yarn less

This will generate a new CSS file in the public folder and then you can use the updated color in the template.