How can we over ride the color of a theme. Eg: I am using light blue theme, and i want to change the blue color to my blue.
Please help how to do that.
Thank you for your question.
Yes, it is possible to apply custom themes and change the theme colors in Flexmonster.
Please see our customizing Flexmonster’s appearance tutorial for guidance.
We would like to add that in case of Angular the fourth step (adding the reference to the CSS) in the provided tutorial may differ:
The custom theme CSS file could be imported, for example, in the
Please let us know if this works.
You are welcome to write to us in case any additional questions arise.
Looking forward to your response.
If we add theme folder within nodemodules..How will it come to dist?
will there be any entry in package.json for the same?
Please provide update on this.
Thank you for your response.
When working with npm, the recommended approach is to store the custom styles in a different location depending on your project structure.
Please let us know if this works fine for you and if additional details are needed.
Looking forward to your reply.
I tried adding the new theme folder outside node_modules but it did not work.
I kept the clone of lightblue theme folder under src/assets/css/.
Let me know If I have missed anything.
Thank you for your answer.
Please notice that the
flexmonster.css file requires the
/assets Flexmonster folder to apply the necessary fonts and icons.
This could be the reason why it didn’t work to load the custom theme.
Currently, we kindly advise copying the
/assets Flexmonster folder to the location where the custom theme CSS files are placed in your project, for example:
│ ├── flexmonster-icons.eot
│ ├── flexmonster-icons.svg
│ ├── flexmonster-icons.ttf
│ └── flexmonster-icons.woff
In addition, we have prepared two projects for assistance (available in the attachments below):
custom-theme-builder.zip– a simple project to help create custom themes for Flexmonster. It contains the base file for creating the custom theme and commands to build it (generate the corresponding CSS and min.css files).
Here is how to run it:
1.1) First, install the dependencies specified in
1.2) You can adjust the variable values and specify the desired colors in the
flexmonster.less file. Then run the following command to create your custom theme:
npm run build
This will generate the needed
angular-flexmonster-custom-theme.zip– this is a sample Angular project illustrating how a previously built custom theme can be used.
Here is how to run it:
2.1) First, install the dependencies specified in
2.2) Then start the application:
Please let us know if this helps.
Looking forward to hearing from you.