A Module for generating and colorizing themes for the Ext library
Switch branches/tags
Nothing to show
Pull request Compare This branch is 1 commit ahead, 36 commits behind extjs:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



Generates a Sass version of Ext theme. Includes methods for colorizing images.

This Gem depends upon RMagick and haml-edge and launchy.


The Gem is hosted at Gemcutter. Install the gem with: sudo gem install extjs-theme


In the root of your Rails app, first execute the following in your console:

$ xtheme init <path/to/ext> <path/to/stylesheets>

This creates a YAML config file named .xthemeconfig in the application root.

— theme_dir: public/stylesheets/sass ext_dir: public/javascripts/ext-3.1.0

Every subsequent xtheme command will act up those directories. If you download a new version of Ext, simply re-execute xtheme init with the new path (TODO: store in Rails /config dir)


$ xtheme init public/javascripts/ext-3.1.0 public/stylesheets

To generate a new Sass theme:

$ xtheme create my-theme

In Rails, this will have created a new directory public/stylesheets/sass/my-theme The generator creates a main include file called my-theme/init.sass (TODO: change to my-theme/all.sass) which contains @include directives for each individual Ext stylesheet. You *no longer need* to include the ext-all.css file from the Ext library – my-theme/init.sass contains all it needs. In a Rails view, you would include this file in the standard Haml/Sass manner.

=stylesheet_link_tag “my-theme/init”

or in an erb template:

<%= stylesheet_link_tag “my-theme/init”

The generator also creates a copy of all the Ext theme images in my-theme/images

Another important sass file created is my-theme/defines.sass. This file contains Sass variable declarations added to each Ext sass file.

!img_path = ../sass/my-theme/images !font = tahoma,arial,verdana,sans-serif !hue = -90.0 Form more on Haml and Sass, consult the HAML documentation to learn about including Sass stylesheets.


The Gem includes commands for theme colorization, including image-processing through RMagick.

Currently, the only effect available is effects:modulate, for modifying the hue, saturation and lightness of a theme according to RMagick:

$ xtheme effects:modulate <theme-name> <hue> <saturation> <lightness> The parameters hue, saturation and lightness are defined as “Float numbers, for example, 0.25 means ”25%“. All three arguments may be omitted. The default value of each argument is 1.0, that is, 100%” Based upon the default blue Ext theme, the following will generate a pink theme:

$ xtheme effects:modulate my-theme 0.5 1.0 1.0

A green theme:

$ xtheme effects:modulate my-theme 1.5 1.0 1.0

*Only hue works currently, saturation and lightness are under development*


Copyright © 2010 Christocracy. See LICENSE for details.