How to Change User Website Primary Color?

🎨 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 → Setting → Customization → Color Options
➡️ Those changes will only reflect inside the Admin Panel
❌ They will NOT affect the frontend (user website)

At the moment, frontend color control from the admin side is not available. This feature is planned for a future update and is already on our product roadmap.

💻 How to Manually Change the Website Primary Color

The primary (pink/brand) colors used on the website are hardcoded in the Vue SCSS design system.

To change the primary color, please follow these steps:

Step 1: Open the SCSS Variables File

Go to the following path in your project:

Project/Modules/Frontend/Resources/assets/sass/frezka-design-system/_variables.scss

Step 2: Update the Primary Color Variable

Inside this file, you will find color variables used across the frontend.

Example:

$blue: #E91E63;

Here, $blue is used as the Primary Color across the website.
You can replace the color code with your preferred brand color.

Example change:

$blue: #FF5722; // New primary color

Step 3: Save the File

After updating the color values, save the file.

Step 4: Rebuild Frontend Assets

Run your frontend build command to apply the SCSS changes.

Example:

npm install
npm run dev

or

npm run build

Step 5: Refresh the Website

After the build is complete, refresh the website.
✅ The updated primary color will now be visible on the landing page and other frontend sections.

📌 Important Note

• Admin Panel color settings ≠ Website color settings
• Website colors must currently be changed manually via SCSS
• Admin-controlled website colors will be available in a future Frezka update