Web Component Theme Switcher with m4dz

Coding Design Systems

Using and styling a theme/mode switcher by using an external Web Component.

Using Web Components as a base block for your design systems components library is a way to maximize the compatibility with a lot of frontend frameworks and interfaces. In this episode, we have a look at a Theme Switch component made using Web Components, and we reuse it in a Nunjucks-based design system, styling it using design tokens. Let’s go!

Resources

Previous episodes you might be interested in