{"id":122,"date":"2025-03-20T07:09:18","date_gmt":"2025-03-20T07:09:18","guid":{"rendered":"https:\/\/documentation.iqonic.design\/handyman\/?p=122"},"modified":"2025-06-03T10:36:41","modified_gmt":"2025-06-03T10:36:41","slug":"how-to-change-primary-color-for-web-admin","status":"publish","type":"post","link":"https:\/\/documentation.iqonic.design\/handyman\/how-to-change-primary-color-for-web-admin\/","title":{"rendered":"How To Change Primary Color for Web \/ Admin"},"content":{"rendered":"<div class=\"nolwrap\">\n<p>To change the primary color for your Web \/ Admin, follow these steps:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 1: Locate the Sass Variable File<\/strong><\/h2>\n\n\n\n<p>Navigate to the&nbsp;<strong>_variable.scss<\/strong>&nbsp;file within your project directory. This file typically resides in the&nbsp;<strong>public\/frontend\/handyman-design-system<\/strong>&nbsp;directory.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 2: Modify the Primary Color Variable<\/strong><\/h2>\n\n\n\n<p>Inside the&nbsp;<code>_variable.scss<\/code>&nbsp;file, locate the variable responsible for defining the colors of your application.<\/p>\n\n\n\n<p>Update the following color codes in the _variables.scss file:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ scss-docs-start color-variables<br>$blue:    #5F60B9 !default;<br>$indigo:  #6610f2 !default;<br>$purple:  #6f42c1 !default;<br>$pink:    #d63384 !default;<br>$red:     #eb5757 !default;<br>$orange:  #faa938 !default;<br>$yellow:  #ff9302 !default;<br>$green:   #219653 !default;<br>$teal:    #1C1F34 !default;<br>$cyan:    #08B1BA !default;<br>\/\/ scss-docs-end color-variables<\/pre>\n\n\n\n<p>After saving file run the command below &#8211;<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npm run dev<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>IMPORTANT<\/strong><\/h3>\n\n\n\n<p>Kindly note that you only need to update the color code and not the variable names.<\/p>\n\n\n\n<p><\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>To change the primary color for your Web \/ Admin, follow these steps: Step 1: Locate the Sass Variable File Navigate to the&nbsp;_variable.scss&nbsp;file within your project directory. This file typically resides in the&nbsp;public\/frontend\/handyman-design-system&nbsp;directory. Step 2: Modify the Primary Color Variable Inside the&nbsp;_variable.scss&nbsp;file, locate the variable responsible for defining the colors of your application. Update the [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":0,"parent":120,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-122","post","type-post","status-publish","format-standard","hentry","category-handyman-services"],"featured_image_src":null,"author_info":{"display_name":"laraveladminiq","author_link":"https:\/\/documentation.iqonic.design\/handyman\/author\/laraveladminiq\/"},"children":[],"_links":{"self":[{"href":"https:\/\/documentation.iqonic.design\/handyman\/wp-json\/wp\/v2\/posts\/122","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/documentation.iqonic.design\/handyman\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/documentation.iqonic.design\/handyman\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/handyman\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/handyman\/wp-json\/wp\/v2\/comments?post=122"}],"version-history":[{"count":4,"href":"https:\/\/documentation.iqonic.design\/handyman\/wp-json\/wp\/v2\/posts\/122\/revisions"}],"predecessor-version":[{"id":1377,"href":"https:\/\/documentation.iqonic.design\/handyman\/wp-json\/wp\/v2\/posts\/122\/revisions\/1377"}],"up":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/handyman\/wp-json\/wp\/v2\/posts\/120"}],"wp:attachment":[{"href":"https:\/\/documentation.iqonic.design\/handyman\/wp-json\/wp\/v2\/media?parent=122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/handyman\/wp-json\/wp\/v2\/categories?post=122"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/handyman\/wp-json\/wp\/v2\/tags?post=122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}