Using Themes

Themes can be used with custom elements by including the theme’s JavaScript and CSS files.

  1. <!DOCTYPE html>
  2. <html lang="en-us" dir="ltr">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Using Custom Elements</title>
  6.     <link rel="stylesheet" href="./output/dist/hero-1.0.0.css">
  7.     <link rel="stylesheet" href"./output/theme/my-theme.css">
  8. </head>
  9. <body>
  10.     <ref-hero image="hero.jpg" title="Make Custom Elements the Easy Way!"></ref-hero>
  11.     <script async src="./output/dist/hero-1.0.0.js"></script>
  12.     <script async src="./output/theme/my-theme.js"></script>
  13. </body>
  14. </html>

Switching Variants

A single theme could have multiple variants. For example the Dojo theme has a “light” and a “dark” variant. The global dojoce variable will let you change the theme at runtime.

  1. dojoce.variant = 'dark';

Custom elements will re-render and immediately reflect the newly selected variant.

Switching Themes

An application can have multiple themes loaded at the same time, and switch between them at runtime. To load multiple themes, load the stylesheet and script for each theme.

  1.     <link rel="stylesheet" href="./output/theme/dojo/dojo-7.0.0-pre.css" />
  2.     <link rel="stylesheet" href="./output/theme/material/material-7.0.0-pre.css" />
  3.     <script src="./output/theme/dojo/dojo-7.0.0-pre.js"></script>
  4.     <script src="./output/theme/material/material-7.0.0-pre.js"></script>

Note that the last loaded theme will be the “current” theme.

At runtime, you can switch themes by setting the theme property on the global dojoce variable.

  1. dojoce.theme = 'material';

Custom elements will re-render and immediately reflect the newly selected theme.