Dojo FAQ: Why are my dijits rendered without a theme?

By on February 5, 2014 11:55 am

DojoFAQ
Dijit was designed to help make your development life easier. However, There are a few pain points to be aware of, and one of them is when dijits are rendered without a theme applied to them. There are a few common causes for this that are easy to identify and even easier to fix.

Forgot to add class to body tag

Forgetting to add the theme class name on the body tag of the document can cause dijits to appear unstyled. This is the most common cause of unstyled dijits, and should be the first place to look.

Wrong:

<body>

Right:

<body class="claro">

Dijit theme CSS selectors begin with the theme name as the top-level selector. If the theme class is not included on the body tag it would cause all dijits to appear unstyled, even if the theme CSS is pulled in, as none of the theme selectors will match the markup.

Forgot to include CSS for theme

Forgetting to pull in the CSS file for the theme is another common pain point. To include the theme, add a link tag with an href that points to the theme file. Theme files in dijit are in the following path structure dijit/themes/themename/themename.css. For example, the claro theme would be included in the following way:

<link rel="stylesheet" href="dijit/themes/claro/claro.css" />

Included wrong CSS or applied wrong class

A less common but possible cause of unstyled dijits is adding the wrong class name to the body tag or including the wrong CSS file.

<head>
	<link rel="stylesheet" href="dijit/themes/claro/claro.css" />
</head>
<body class="tundra">
</body>

Just as before, the theme’s CSS selectors will not match the markup and the styles will not be applied if the class name on the body tag does not match the name of the loaded theme.

These issues can be easy to miss and be a real cause for confusion and frustration. Once you know where to look, however, fixing them is extremely simple.