{"id":1395,"date":"2025-07-16T08:25:04","date_gmt":"2025-07-16T08:25:04","guid":{"rendered":"https:\/\/documentation.iqonic.design\/frezka\/?p=1395"},"modified":"2026-02-03T07:40:58","modified_gmt":"2026-02-03T07:40:58","slug":"how-to-change-user-website-primary-color","status":"publish","type":"post","link":"https:\/\/documentation.iqonic.design\/frezka\/how-to-change-user-website-primary-color\/","title":{"rendered":"How to Change User Website Primary Color?"},"content":{"rendered":"
\n

\ud83c\udfa8 Changing Colors on the Frezka Website (Frontend)<\/h2>\n\n\n\n

Currently, Frezka allows color customization from the Admin Panel<\/strong>, but this applies only to the Admin Panel interface<\/strong>, not the user-facing website<\/strong>.<\/p>\n\n\n\n

If the admin changes colors from:
Admin Panel \u2192 Setting \u2192<\/strong><\/strong> Customization \u2192 Color Options<\/strong>
\u27a1\ufe0f Those changes will only reflect inside the Admin Panel<\/strong>
\u274c They will NOT affect the frontend (user website)<\/strong><\/p>\n\n\n\n

At the moment, frontend color control from the admin side is not available<\/strong>. This feature is planned for a future update and is already on our product roadmap.<\/p>\n\n\n\n

\ud83d\udcbb How to Manually Change the Website Primary Color<\/h2>\n\n\n\n

The primary (pink\/brand) colors used on the website are hardcoded in the Vue SCSS design system<\/strong>.<\/p>\n\n\n\n

To change the primary color, please follow these steps:<\/p>\n\n\n\n

Step 1: Open the SCSS Variables File<\/h4>\n\n\n\n

Go to the following path in your project:<\/p>\n\n\n\n

Project\/Modules\/Frontend\/Resources\/assets\/sass\/frezka-design-system\/_variables.scss\n<\/code><\/pre>\n\n\n\n
Step 2: Update the Primary Color Variable<\/h4>\n\n\n\n
Inside this file, you will find color variables used across the frontend.<\/p>\n\n\n\n
Example:<\/p>\n\n\n\n
$blue: #E91E63;\n<\/code><\/pre>\n\n\n\n
Here, $blue<\/code> is used as the Primary Color<\/strong> across the website.
You can replace the color code with your preferred brand color.<\/p>\n\n\n\n
Example change:<\/p>\n\n\n\n
$blue: #FF5722; \/\/ New primary color<\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Step 3: Save the File<\/h4>\n\n\n\n
After updating the color values, save the file.<\/p>\n\n\n\n
Step 4: Rebuild Frontend Assets<\/h4>\n\n\n\n
Run your frontend build command to apply the SCSS changes.<\/p>\n\n\n\n
Example:<\/p>\n\n\n\n
npm install
npm run dev<\/pre>\n\n\n\n
or<\/p>\n\n\n\n
npm run build<\/pre>\n\n\n\n
Step 5: Refresh the Website<\/h4>\n\n\n\n
After the build is complete, refresh the website.
\u2705 The updated primary color will now be visible on the landing page and other frontend sections.<\/p>\n\n\n\n
\ud83d\udccc Important Note<\/h3>\n\n\n\n
    \n
  • Admin Panel color settings \u2260 Website color settings<\/li>\n\n\n\n
  • Website colors must currently be changed manually via SCSS<\/strong><\/li>\n\n\n\n
  • Admin-controlled website colors will be available in a future Frezka update<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"
    \ud83c\udfa8 Changing Colors on the Frezka Website (Frontend) Currently, Frezka allows color customization from the Admin Panel, but this applies only to the Admin Panel interface, not the user-facing website. If the admin changes colors from:Admin Panel \u2192 Setting \u2192 Customization \u2192 Color Options\u27a1\ufe0f Those changes will only reflect inside the Admin Panel\u274c They will […]<\/p>\n","protected":false},"author":11,"featured_media":0,"parent":1223,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1395","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"featured_image_src":null,"author_info":{"display_name":"laraveladminiq","author_link":"https:\/\/documentation.iqonic.design\/frezka\/author\/laraveladminiq\/"},"children":[],"_links":{"self":[{"href":"https:\/\/documentation.iqonic.design\/frezka\/wp-json\/wp\/v2\/posts\/1395","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/documentation.iqonic.design\/frezka\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/documentation.iqonic.design\/frezka\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/frezka\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/frezka\/wp-json\/wp\/v2\/comments?post=1395"}],"version-history":[{"count":4,"href":"https:\/\/documentation.iqonic.design\/frezka\/wp-json\/wp\/v2\/posts\/1395\/revisions"}],"predecessor-version":[{"id":1401,"href":"https:\/\/documentation.iqonic.design\/frezka\/wp-json\/wp\/v2\/posts\/1395\/revisions\/1401"}],"up":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/frezka\/wp-json\/wp\/v2\/posts\/1223"}],"wp:attachment":[{"href":"https:\/\/documentation.iqonic.design\/frezka\/wp-json\/wp\/v2\/media?parent=1395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/frezka\/wp-json\/wp\/v2\/categories?post=1395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/frezka\/wp-json\/wp\/v2\/tags?post=1395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}