Skip to content
A Module for generating and colorizing themes for the Ext library
Find file
Failed to load latest commit information.
bin Refactor entire gem to use Thor instead of crappy 'Command' architect…
lib Refactor entire gem to use Thor instead of crappy 'Command' architect…
test Refactor entire gem to use Thor instead of crappy 'Command' architect…
.gitignore first commit
LICENSE first commit
README.rdoc docs
Rakefile Added 3 simple tests
extjs-theme.gemspec bump minor version -> 2.0



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.