Dear visitor, despite the COVID-19 outbreak, our team continues operating at full speed.

Also, here is the form where you can apply for a special discount and we will contact you with possible options. Stay safe and continue achieving your business goals.

Fill the form
Get Free Trial
Get Free Trial

Override the color of theme

shilpi asked on March 12, 2020

Hi Team,
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.

6 answers

Vera Didenko Flexmonster March 12, 2020

Hello, Shilpi,
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 styles.css:

@import "PATH_TO_YOUR_THEME_FOLDER/lightblue-theme/flexmonster.min.css"

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.
Best Regards,

shilpi March 12, 2020

Thanks Vera,
If we add theme folder within nodemodules..How will it come to dist?
will there be any entry in package.json for the same?

shilpi March 13, 2020

Please provide update on this.

Vera Didenko Flexmonster March 13, 2020

Hello, Shilpi,
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.
Kind regards,

shilpi March 13, 2020

Hi Vera,
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.

Vera Didenko Flexmonster March 13, 2020

Hello, Shilpi,
Thank you for your answer.
Please notice that the flexmonster.min.css or 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:

└── custom-theme
├── assets
│ ├── flexmonster-icons.eot
│ ├── flexmonster-icons.svg
│ ├── flexmonster-icons.ttf
│ └── flexmonster-icons.woff
└── css
└── flexmonster.min.css

In addition, we have prepared two projects for assistance (available in the attachments below):

  1. – 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 package.json:

    npm install

    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 flexmonster.css and flexmonster.min.css files.

  2. – 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 package.json:

    npm install

    2.2) Then start the application:

    ng serve


Please let us know if this helps.
Looking forward to hearing from you.
Kind regards,

Please login or Register to Submit Answer