{"id":93,"date":"2025-02-19T07:26:51","date_gmt":"2025-02-19T07:26:51","guid":{"rendered":"https:\/\/documentation.iqonic.design\/kivilab-laravel\/?p=93"},"modified":"2025-06-13T06:01:46","modified_gmt":"2025-06-13T06:01:46","slug":"how-to-change-primary-color-for-web-admin","status":"publish","type":"post","link":"https:\/\/documentation.iqonic.design\/kivilab-laravel\/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 scss 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>kiviLabs\/public\/scss\/customizer<\/strong>&nbsp;and&nbsp;<strong>kiviLabs\/public\/scss\/hope-ui-deesign<\/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: #5670CC !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<p><strong>IMPORTANT<\/strong><\/p>\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 scss Variable File Navigate to the&nbsp;_variable.scss&nbsp;file within your project directory. This file typically resides in the&nbsp;kiviLabs\/public\/scss\/customizer&nbsp;and&nbsp;kiviLabs\/public\/scss\/hope-ui-deesign&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":9,"featured_media":0,"parent":91,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-93","post","type-post","status-publish","format-standard","hentry","category-kivilab"],"featured_image_src":null,"author_info":{"display_name":"","author_link":"https:\/\/documentation.iqonic.design\/kivilab-laravel\/author\/"},"children":[],"_links":{"self":[{"href":"https:\/\/documentation.iqonic.design\/kivilab-laravel\/wp-json\/wp\/v2\/posts\/93","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/documentation.iqonic.design\/kivilab-laravel\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/documentation.iqonic.design\/kivilab-laravel\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/kivilab-laravel\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/kivilab-laravel\/wp-json\/wp\/v2\/comments?post=93"}],"version-history":[{"count":10,"href":"https:\/\/documentation.iqonic.design\/kivilab-laravel\/wp-json\/wp\/v2\/posts\/93\/revisions"}],"predecessor-version":[{"id":845,"href":"https:\/\/documentation.iqonic.design\/kivilab-laravel\/wp-json\/wp\/v2\/posts\/93\/revisions\/845"}],"up":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/kivilab-laravel\/wp-json\/wp\/v2\/posts\/91"}],"wp:attachment":[{"href":"https:\/\/documentation.iqonic.design\/kivilab-laravel\/wp-json\/wp\/v2\/media?parent=93"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/kivilab-laravel\/wp-json\/wp\/v2\/categories?post=93"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/kivilab-laravel\/wp-json\/wp\/v2\/tags?post=93"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}