This recipe demonstrates how to create a widget which a consumer can theme.


  1. Add the necessary imports:
import { v } from '@dojo/widget-core/d';
import { WidgetBase } from '@dojo/widget-core/WidgetBase';
import { ThemedMixin, theme } from '@dojo/widget-core/mixins/Themed';
import * as css from './styles/Header.m.css';
  1. Define your new widget:
class Header extends ThemedMixin(WidgetBase) {
    protected render() {
        return v('div', {
            classes: [ this.theme(css.root) ]
        }, [
            'The header'

export default Header;


  • This widget definition extends from the ThemedMixin
  • The reference to this.theme(css.root) specifies the root class as a themed class
  1. When you render your Header widget defined above, you can override the root class by defining your own theme:
w(Header, {
    theme: CustomTheme

There is a dedicated recipe on how to create the CustomTheme variable in the above code snippet.

Additional resources