Neptune Theme Color Variations

Retired. This is the original Ext JS 5 example from 2014, kept at its own URL and no longer listed. The mechanism it shows is still the framework's own, and it has been rebuilt on Ext JS 8 as Neptune Color Variations — same six colours, same screen, current framework.

Description

Read 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.

Twelve years on, there is a second answer. An upcoming companion demo, Theme Colors at Runtime in ExtJS, rebuilds this same screen on the modern toolkit with the base color as a CSS custom property, so it is any color rather than six, and one build rather than six. This example is kept as it is, because the approach below is still the one the framework intends and is still the right answer when the colors are known in advance.

Open this example in a new tab ↗

Main features