This document discusses creating custom themes for Dojo widgets using CSS preprocessors like LESS or Stylus. It provides advantages of using preprocessors like variables, reuse, and consistency. It demonstrates how to structure theme files, replace an existing app theme, and create a new theme by changing variables. The document also shares some pre-built themes the author has created and offers to share themes or provide help customizing themes.

1. Create Your Own Dojo Theme in
20 Minutes
Yiwei Ma
UI/UX Team, Professional Services, ESRI

2. Why do we need
custom themes?

3. Reasons to have custom themes:
• To prettify the look and feel
• To make your app unique
• To better incorporate business
branding needs

4. Out-of-box Dojo themes
tundra soria
nihilo
claro

5. Look boring and not really
modern, right?

6. What about if you want your
app to look somewhat like…

7. This?
(http://dribbble.com/shots/943079-Webapp-Dashboard)

8. Or this?
(http://morethanamap.com)

9. How about customizing Dojo dijits ourselves in CSS?
Let’s start from this simple dijit:
dijit/form/Button

10. How this dijit’s HTML structure looks like in FireBug:

11. To customize Dojo dijits by overwriting styles can be
painful
• Html structures of dijits are complex
• Lack of documentation
• Need to use “ !important” in some cases

12. Using Twitter’s Bootstrap?
Easy to use
Tons of third party themes
Need jQuery to run Bootstrap’s
components
ArcGIS API for JS is built on Dojo,
this requires apps to include two
libraries
+
+
-
-

13. Customize Dojo
themes using
CSS
preprocessor

14. Advantages of using CSS Preprocessors:
• Possible to use variables, functions,
and mixins
• Properties and patterns can be reused
• Consistency across styles
• Easier to maintain

15. How a CSS preprocessor works

16. Tools needed:
• CSS preprocessors:
- LESS
- Or Stylus
• Claro theme files in .less or .styl
format
- .less format
- .styl format

17. How a Dojo theme gets created by a CSS
preprocessor
default variables
…
dijit 1 variables dijit 2 variables dijit (n) variables
…
.styl file for dijit 1 .styl file for dijit 2 .styl file for dijit (n)
processing
…
.css file for dijit 1 .css file for dijit 2 .css file for dijit (n)
theme

18. Some themes* I have made
• Bootstrap
• ArcGIS for Developers CSS
• Flat
(*no old browser support; about
80% of dijits done; ESRI widgets
and dgrid included)

19. Demo
Replacing a Dojo
app with custom
themes

20. Demo
How to create a
new theme by
changing
variables

21. Closure
• Contact me if you are interested in using my themes
- Bootstrap
- ArcGIS for Developers CSS
- Flat
• You can get the flat theme here:
- http://github.com/Esri/dojo-theme-flat
• I will keep adding more dijits and more themes
• You can contact me by my personal email: yma@esri.com