[Edit: Updated for 0.4.3]

dojo.widget.Button is slick and nifty, but the default blue doesn’t suit all sites. Unfortunately, it’s harder to customize than dojo.widget.TabContainer. The demo suggests creating a subclass, but that’s not to my taste — that mixes your code into the Dojo directory tree, whereas I prefer keeping thing loosely coupled. I favour a simpler way:

This assumes that your directory tree is:

• mysite
  • images
    • images/atomButton-l.gif
    • images/atomButton-r.gif
    • images/atomButton-c.gif
    • …
  • dojo
    • src
      • widget
        • Button.js

The first ../ takes you into src/, the second into dojo/, and the third into mysite/.

The path was handled differently before 0.4.3. You only needed one ../.

I copied all the soria gifs from dojo/src/widget/templates/images/ to my own images/ directory. I then applied Photoshop’s Image > Adjustments > Hue/Saturation filter with [x] Colorize, Hue of 192, and Saturation of 50. This got them to matching the background — itself Hue of 192 and Sat of 50. Finally, I put in the four lines of code above.