Neptune Theme Color Variations


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.

Open in new window.

Main Features

  • one generated theme (package) per color
  • each theme built with sencha package build
  • built css files and resources directories 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

Use Cases

You can use this approach when you need only one theme but in many color variations. Reason for this “limitation” is that Ext themes consist not only of css and resources but also of javascript files that are packed into app.js.

If we switch only css and resources, as in this example, but the base themes are different then we wind up running Neptune javascript with Crisp resources, for example, what could break the app.

Source Files

Source 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 MainController and Component.scss files from themes packages.

If you want to see the example code, login or sign-up. Free membership is available.
Follow me:


I'm a well seasoned developer, consultant and educator of web applications based mainly on Sencha libraries, PHP, MySQL and Node.js. Besides (Apple) computers, I love photography and mountain biking.
Follow me:

Latest posts by Saki (see all)


  1. Nelson Silva says

    Sorry for the incomplete post above, but nice post and thank you for sharing.

    If i need more color i must add $base-color: color to the Component.scss?


    • says

      You need a separate theme directory for each color so you have separate Component.scss for each color. Component.scss contains only one line that is the base color line.

      PS: I’ve deleted that incomplete comment.

  2. Nelson Silva says

    Hello Saki, finally i was able to compile and generate a color theme just like those above, just one minor different i have checked and seams to be OK in yours, in my 2 generated colors theme, i made one red and one green both of them the combo boxes don’t have those images (pointing down arrows) and i do not know why.

    Any ideas?


  3. Nelson Silva says

    This are the steps that i make, it all works fine except the combos that do not have those arrows.

    sencha -sdk /path-to-my-sdk generate workspace my-workspace

    cd my-workspace

    sencha -sdk ext generate app Themeapp theme-red

    cd theme-red

    sencha app watch

    sencha generate theme RedTheme

    then i change the package.json to extend the neptune and go to sass/var/Component.scss and put the $base-color: #c00000 !default;

    sencha app refresh

    and i the end

    sencha package build

    I believe that some of these steps are not necessary because i only what to build the theme to another color, i do not want to build my app with cmd, at the moment my project only load in the html the neptune and my app is not compiled.

    This works well the color but for some reason the only thing that i do not see at first is those arrows because my window has a lot of them.

    Can you help out?


  4. David MacLean says docs say: “Use this to make one-time references to DOM elements which are not going to be accessed again either by application code”

    I see you using in your code more than one-time? I really don’t “get” what a fly is.

    (What I want to do is load script from a code package, not a theme).

  5. Nelson Silva says

    I have a problem with this color themes.

    If i have for example an textbox without a fieldLabel: ”, the color theme applies the fieldLabel even if there’s nothing to show. applies the default and the field in the views are off, in the native themes this doen’t happens.

We will be happy to hear back from you

Please Login to post a comment