asked on July 12, 2024
Was looking for information on how to dynamically change themes in flexmonser.
Found a few answers with examples like this:
https://jsfiddle.net/flexmonster/bo56pzbq/
Solutions in the examples: use link url and a couple of functions setTheme(cssUrl), getPrevTheme().
If we want to change the theme when installing a Pivot component. We just do this import "flexmonster/theme/dark/flexmonster.css";
And the theme becomes dark.
But we want to change themes dynamically. Standard and dark.
In our situation, the component is loaded and it gets a variable that has the value ''light'' or ''dark''.
And we have a button that changes the value of that variable.
Example:
var = "light" -> (click on button) -> var = "dark" -> (click on button) -> var = "light"...
And depending on the value of this variable we want to change the theme ( standard or dark ) But without using URL ('https://cdn.flexmonster.com/theme/dark/flexmonster.min.css') and ('https://cdn.flexmonster.com/flexmonster.min.css').
Thanks for your reply.
⋅ July 15, 2024
Hi.
For dynamic style replacement, we decided to take themes from node_modues. Default theme: flexmonster.css, dark theme: flexmonster_dark.css (renamed). And placed them in the directory of our project. And instead of URL links we pass paths to css files. This is one of the working methods that we have invented.
However, there is a problem with CSS version mismatch. As it is written in the error, we cleared the browser cache and checked if the versions of node modele and css files match. But the error didn't disappear...
Translated with DeepL.com (free version)
⋅ July 16, 2024
Hi Julian,
Thank you for reaching out to us.
The warning may indicate that Flexmonster uses different CSS files, not those from your screenshots. We recommend checking the location of the flexmonster.css file through the Network tab in your browser's developer tools. This way, you can find which CSS file is used in the component. Make sure that versions of CSS and JS files are the same.
Please let us know if it works for you. Looking forward to hearing from you.
Kind regards,
Nadia
⋅ July 17, 2024
Hi Nadia,
I checked which files are being used. They are the same version as the flexmonster version
⋅ July 18, 2024
Hello, Julian!
Thank you for your reply.
We understand your concerns regarding the "CSS version mismatch" warning. However, we would like to assure you that this warning is currently not an issue. This warning only indicates the difference in CSS and JS version numbers, but the CSS file content may be the same. This is relevant for the current timeframe since we are not updating our CSS frequently and do not include any major changes that can affect the overall appearance. Hence, the "CSS version mismatch" can be ignored.
Please feel free to reach out if you have any more questions.
Best Regards,
Maksym
