DescriptionRead the accompanying blog post: Lightweight Theming The standard (and recommended) way of Ext Theming involves creating a theme with Sencha Cmd, modify or create SASS files with styles comprising the theme and compile the application with that theme activated in
app.json. The result is a complete application (app.js) plus the theme what results in the necessity of reloading the application when we want to change the theme at the app runtime. Ext Kitchen Sink Examples are designed this way. On the other hand, many times a much lighter approach is sufficient or required when we only need color variations of a default Ext theme, e.g. Neptune. This example shows Neptune Theme color variations. Open in new window.
- one generated theme (package) per color
- each theme built with
sencha package build
resourcesdirectories deployed to production server
- themes are not optimized for the app but they contain theming of all Ext components
- all themes (colors) must inherit from same base theme
- runtime switching w/o reload
Source FilesSource of the form itself is not very interesting for this example, it is your application after all. What is interesting is the theme switching logic implemented in view controller
Component.scssfiles from themes packages. If you want to see the example code, login or sign-up. Free membership is available.