Hi,
you can also check the sample solution for NG.
The sample solution uses the Servoy Less Theme.
Is possible to override the less theme colors at runtime using solutionModel.
- Code: Select all
function overrideStyleColors(mainColor, secondaryColor) {
var newColorStyle = {
'MAIN-COLOR': mainColor,
'SECONDARY-COLOR': secondaryColor
}
// set the preferred colors
var mediaOriginal = solutionModel.getMedia('cloudSampleTemplateOriginal.less');
var cssText = mediaOriginal.getAsString();
// override css
cssText = utils.stringReplaceTags(cssText, newColorStyle);
var media = solutionModel.getMedia('cloudSampleTemplate.less');
media.setAsString(cssText);
application.overrideStyle('cloudSampleSolution.less', 'cloudSampleTemplate.less');
}
The less file looks like this:
- Code: Select all
// import of the custom servoy theme properties that will import the hidden servoy theme, this imported file is for customizing the default servoy theme properties
@import 'cloudSampleSolution.less';
@main-color: %%MAIN-COLOR%%;
@sidenav-color: %%SECONDARY-COLOR%%;
Note in the above code there is a cloudSampleTemplate.less and cloudSampleTemplateOriginal.less, which is an exact copy; keeping an exact copy of the cloudSampleTemplateOriginal.less because the sample solution allow to change colors multiple times.
If you login into the Developer using your own credentials you can install the sample solution by clicking on the Getting Started button; i recommend you try it on a new empty workspace, since will auto-install a bunch of modules like svyUtils, svySearch.. etc.