Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

Issue with Theme Color Customization


Hello,
I use metronic_angular_v8.3.1_demo7

I have tried to customize the colors of my theme( like _variables.custom.scss file) , but the changes are not reflecting no matter what I do. I am not sure what the problem is.
.

Could you please guide me with detailed steps on how to properly modify the primary and secondary colors of the theme project? Any help or instructions would be greatly appreciated.


G
Guest 8 months ago
Angular
1 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

user
Faizal Author 8 months ago

Hi

Sorry for the delay. You have two files for color customization: /src/assets/sass/components/_variables.custom.scss - For primary color overrides /src/assets/sass/components/_variables.override.scss - For secondary overrides

Edit /src/assets/sass/components/_variables.custom.scss:

// Primary colors (currently using GREEN in your demo)
$primary: #YOUR_PRIMARY_COLOR !default; 
$primary-active: #YOUR_PRIMARY_HOVER_COLOR !default;
$primary-light: #YOUR_PRIMARY_LIGHT_COLOR !default;

// Secondary colors (labeled as "success" but shows BLUE)
$success: #YOUR_SECONDARY_COLOR !default;
$success-active: #YOUR_SECONDARY_HOVER_COLOR !default;
$success-light: #YOUR_SECONDARY_LIGHT_COLOR !default;

Note: In Demo7, the variable names are swapped - $primary controls the green color and $success controls the blue color you see in the UI.

Example Color Customization

// Custom blue primary color
$primary: #007bff !default; 
$primary-active: #0056b3 !default;
$primary-light: #cce5ff !default;

// Custom orange secondary color
$success: #fd7e14 !default;
$success-active: #e8590c !default;
$success-light: #ffe5d0 !default;

The most common reason changes don't reflect is the development server isn't running or needs restart:

# Stop any running server (Ctrl+C)
# Then run:
npm run dev

If changes still don't reflect after following these steps, check the browser console and terminal for any error messages

Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(