Skip to main content

How To Change Primary Color for Web / Admin

To change the primary color for your Web / Admin, follow these steps:

Step 1: Locate the Sass Variable File​

Navigate to the _variable.scss file within your project directory. This file typically resides in the public/frontend/handyman-design-system directory.

Step 2: Modify the Primary Color Variable​

Inside the _variable.scss file, locate the variable responsible for defining the colors of your application.

Update the following color codes in the _variables.scss file:

// scss-docs-start color-variables
$blue:    #5F60B9 !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #d63384 !default;
$red:     #eb5757 !default;
$orange:  #faa938 !default;
$yellow:  #ff9302 !default;
$green:   #219653 !default;
$teal:    #1C1F34 !default;
$cyan:    #08B1BA !default;
// scss-docs-end color-variables

After saving file run the command below - 

npm run dev
Important

Kindly note that you only need to update the color code and not the variable names.