Recently I was working on a new design for a project and trying create a Dojo Theme to go along with it. I’ve always had kind of mixed feelings about Dojo Themes. On one hand having a clean, consistent look for all the form and layout elements right out of the gate is awesome and can really speed up initial development. On the other hand customizing parts of a theme, like a lot of things in Dojo, has a very steep learning curve and even making what seem like trivial changes can quickly become a huge headache.

I decided to try to avoid some of the problems I’ve run into before by creating a complete theme instead of just hacking parts of one of the default themes as I went along. Dojo has a theme tester page which is very helpful for just this task. I also decided it would be a good time to to learn Less since the Claro theme uses it. The learning curve for Less is pretty small and after playing with it a little I can’t imagine trying to write style sheets for a site without it.

Then I got the idea to try to use Less to build a more dynamic theme tester that would let you change values in the style sheets similar to the ThemeRoller for jQuery UI. After hacking together a custom version of Less I came up with this proof of concept page http://sporkcode.com/sandbox/dojoThemeShrine. Basically I got Less to save a list of variables and their values as it compiles the styles sheets. The page then creates a text input for each variable and when one is changed it tells Less to recompile the styles sheets with the new values. It’s a little slow, but it works and it nice to see changes without having to edit, save, compile, refresh.

When I have some more time I’m going to making this more functional. I think making mixins editable along with variables would be a good next step. I’m also thinking about coming up with a way to group the variable by namespace or maybe by file. Being able to export the updated style sheet would also be handy. I’m also going to clean up some of the changes I made to Less and include them in a feature request to have an option for the compiler to map variables and mixins.