Coding Design Systems - ep19 - Using an external Web Component Theme Switch in your design system

Every Tuesday at 5:30PM UTC, join @Georges_Gomes, @m4d_z, and their guests in a new live coding session about design systems, on!

⎯⎯⎯ In this episode ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

00:00 - Intro 01:13 - A Web Component ThemeSwitcher 10:41 - Adding support for external styles based on the theme switch mode 12:58 - Styling internal parts of a Web Component 32:52 - Publishing Web Component as an external package 36:36 - Using an external ThemeSwitch component in your design system 46:33 - Outro: next episode is dedicated to building design systems with Stencil

⎯⎯⎯ Description ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

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: