![]() Themes support localization files to provide translation texts for different locales to use, such as _themeLabel used by the theme setting panel in the builder to display the name of the theme. Uncomment the code inside of style.ts to see examples. For example, the buttonStyles function is exported as "Button" in the sample style.ts file. Styles for UI components can be added the same way: wrap the CSS in a function and export it as a module with the same name as the component. Global styles can be added to the globalStyles function and exported as a module with the name of "Global". Style ModulesĪny custom CSS styles can be added inside of the style.ts file. NOTE: In order to have your theme customization to be reflected correct, please remove any unchanged variables from the demo variables.json file to avoid unneeded theme overrides. The variables.json file in the sample theme folder contains all variables from the default theme, which can be overridden with different values. ![]() The variables object is then applied to the style modules (including the custom ones from style.ts) to dynamically generate CSS style sheets. ![]() When a custom theme is selected, the theme manager from the Jimu framework will read the custom variables in the variables.json and merge them with the default ones to create a new variables object at runtime. How to use the sampleĬlone the sample repo and copy this theme's folder (within themes) to the client/your-extensions/themes folder of your Experience Builder installation. This sample contains the minimal required files to create a custom theme. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |