Skip to content
A Module for generating and colorizing themes for the Ext library
Failed to load latest commit information.
lib Refactor entire gem to use Thor instead of crappy 'Command' architect… Apr 21, 2010
.document first commit Feb 12, 2010
LICENSE first commit Feb 12, 2010
README.rdoc docs Apr 21, 2010
Rakefile Added 3 simple tests Apr 20, 2010
VERSION Version bump to 0.2.0 Apr 21, 2010



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

This Gem depends upon RMagick and haml-edge


The Gem is hosted at Gemcutter. Install the gem with:

gem install extjs-theme

or add

gem 'extjs-theme' to you Gemfile and execute

$ bundle install


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

$ bundle exec xtheme init <path/to/ext> <path/to/stylesheets/sass-dir>

This creates a YAML config file named config/xtheme.yml in the application root. </path/to/ext> defaults to public/javascripts/ext-3.2 and </path/to/stylesheets/sass-dir> defaults to public/stylesheets/themes.

— theme_dir: app/stylesheets/themes ext_dir: public/javascripts/ext-3.2.0

or generate a custom configuration file by execute the following in your console:

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

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


$ bundle exec xtheme init public/javascripts/ext-3.3.0

To generate a new Sass theme:

$ bundle exec xtheme create my-theme

In Rails, this will have created a new directory public/stylesheets/themes/my-theme

The generator creates a main include file called 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/all.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/all”

or in an erb template:

<%= stylesheet_link_tag “my-theme/all”

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: '../themes/my-theme/images' $font: tahoma,arial,verdana,sans-serif $hue: -90.0

For 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 modulate, for modifying the hue, saturation and lightness of a theme according to RMagick:

$ bundle exec xtheme modulate <theme-name> <hue> <saturation> <lightness>

The parameters hue, saturation and lightness are defined as “Float numbers, for example, 0.25 means ”25%“. The median value of each argument is 1.0, that is, 100%”

Based upon the default blue Ext theme, the following will generate a pink theme:

$ bundle exec xtheme modulate my-theme 0.5 1.0 1.0

A green theme:

$ bundle exec xtheme 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.

Something went wrong with that request. Please try again.