New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs 
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.
Replies (1)
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 devIf changes still don't reflect after following these steps, check the browser console and terminal for any error messages
