Update Theme Colors _variables.custom.scss (HTML)
I followed the guidance to update the theme colors using the variables file.
$primary: if(isDarkMode(), #1C108F, #32279A) !default;
However, I have elected to use the dark theme and deployed it successfully, yet the theme color changes, show up when I run re-run GULP on the light version, but not the dark. Am I missing a step or something to alter the theme color of the dark theme? Any help would be appreciated.
Replies (11)
This was not the issue. The issue was when updating the variable SCSS file to change theme color it does not show up or work on dark theme. It does show up and work on the light theme. I’ve changed it is the custom variable file - it is not working globally.
In _variables.custom.scss please try to use the SASS variables without !default;
Can you please double check your dark mode CSS file in the assets folder and see if the color is compiled? Also, please double check if the updated dark version of the style and plugins bundle CSS is included by clearing the browser cache.
The color has NOT complied on dark CSS. I have rerun yarn, gulp, then built a new localhost - Am I missing a step after changing the variable CSS to make it compile to the dark CSS. I thought by rerunning gulp, it would update. I am using visual studio.
I know I can change it manually in dark CSS - but the variable should override as per your documentation. Maybe there is a step I'm missing to execute changes from variable to the project. I am new to this file structure.
Sorry to keep bothering you
I can confirm, I have compiled the project using yarn and gulp and the reflected theme override color changes do update the light version CSS but not the dark theme CSS. I have tried it numerous times. I have even tried to change the dark mode CSS primary color to the desired color and complied again to no avail. I am not sure why it is not handling the changes. Yes, I have cleared the browser cache as well, however, this would not matter as the dark CSS file has not reflected the changes.
May I know your Metronic version?
Are you using the --dark-mode to compile the dark mode css files as per documentation ?
Yes, I have. V: 8.0.35.
The issue is resolved. I gulped and yarned using Visual Studio as per documentation - I was new at the first attempt. It is resolved. Thank you kindly!
Great! Glad to hear that. You are welcome 
