Generate a theme with Sencha CMD

Posted on in Environment Ext JS Sass Sencha Sencha Touch

This guide will teach you how to generate a Sencha Theme with Sencha CMD, to start theming with SASS.

Prerequisites

  1. Make sure you have Sencha CMD installed. If you don't have Sencha CMD installed: See this blog post.
  2. Make sure you have SASS/Compass/Ruby installed. No? Check this blog post.

All applications start with a "default" theme. To create new themes, you can easily generate themes with Sencha CMD.

Generate your theme

  1. Navigate to your project with your console/terminal and type the following command:
    sencha generate theme MyThemeName
    This will generate for you the following folders:
    • [project]/resources/sass/MyThemeName
    • [project]/resources/theme/MyThemeName
    • [project]/resources/css/MyThemeName (after compiling the SASS file)

  2. After generating the theme, [project]/resources/sass/MyThemeName/config.rb is generated with the correct paths to all theme folders.
  3. From here you can start editing your SASS file.
  4. The next step is to build the image slices needed for IE browsers.

    This is done with the following command:

    sencha theme build MyThmeName

    This will slice all the images in the CSS folder. This approach reduces the size of the CSS file since all image paths are relative to the CSS file location.

  5. You can preview your theme in your browser: [project]/resources/theme/MyThemeName/theme.html

Do you want to know more about theming Sencha with SASS? Check this blog post.

Read more info about Theming with Sencha CMD? Check: http://docs.sencha.com/ext-js/4-1/#!/guide/command_theme

Comments

  1. Patrick says on
    April 12, 2014 at 6:49 pm
    Reply

    Hi Lee,
    Just tried to generate a theme for a Sencha Touch application with the Sencha Cmd command :
    sencha generate theme Light
    but I receive the following error:
    Generate Theme is an ExtJS SDK specific command
    Does it mean that it can be done only for ExtJS app, not for ST app?

    • Lee says on
      April 12, 2014 at 8:47 pm
      Reply

      Hi Patrick, Yes. In Ext JS themes are packages (and so are plugins and locales). Packages are handy because you can share those between projects or persons. With theme packages you can create totally advanced experiences. Unfortunately, in Sencha Touch themes are not that advanced. Themes in ST are not packages, and there is no theme inheritance like how it works in Ext. The stylesheet for a ST project is located in the resources/sass folder. It will be generated automatically when you generate a project…

      Let me know if you have more questions about this. I love THEMING in Ext JS!

  2. Alex says on
    August 30, 2014 at 4:04 pm
    Reply

    Hi Lee,

    when extending theme, is it possible to use SASS mixins and variables from parent theme?
    When I extend crisp theme with my custom (which is package), and doing something like:
    @include extjs-button-toolbar-large-ui

    I’ve got compilation error as result, same with variables from parent theme ($padding: $button-large-padding).

    when define only ordinary values eg ($_arch_color-over: rgba(255,255,255,1);)
    it compiles ok.

    thanks,

    Alex.

    • Lee says on
      September 2, 2014 at 7:46 am
      Reply

      Hi Alex,
      Yes, this is indeed possible. Actually this is the power & magic of theming in Ext JS.
      You can create variables, styles and mixins on Theme level and on App level.
      When you want you can override variables on App level. For example when you have an Ext app, used by different enterprises. You could brand each app for every company, while extending the default styles from the global theme.

      You can read more about this concept here: http://docs.sencha.com/extjs/5.0/core_concepts/theming.html
      Also, I wrote advanced theming training courses for Sencha, where I teach this subject: http://www.sencha.com/training/advanced-theming-for-sencha-touch

      Good luck!

  3. Alfred says on
    March 3, 2015 at 4:05 pm
    Reply

    May i know the command on how to build a sandboxed theme? I saw this thread in the forum, http://www.sencha.com/forum/showthread.php?150204-Is-it-possible-to-use-Sencha-SDK-and-Sandbox-mode&p=1090658, I was able to sandbox app.js but not the final all.css file.

  4. Lee says on
    March 8, 2015 at 2:48 pm
    Reply

    Hi Alfred, You will need to enable this in the app.json file, in the “theme” block…
    Out of my head, it’s probably:
    “theme”: “ext-theme-sandbox”,

    Then do a rebuild.

Post a Comment

Your email is never published nor shared.
Required fields are marked *