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 Backlight.dev!

⎯⎯⎯ 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 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

• Web Component Theme Switcher: https://studio.webcomponents.dev/edit/YaymfqRynw8un8pOaow9
• ::part() CSS styling: https://developer.mozilla.org/en-US/docs/Web/CSS/::part
• Nunjucks Backlight starter kit: https://studio.backlight.dev/edit/G9KcHezG3XVGa3tjILJI/readme/doc/index.njk?p=doc

Previous episodes you might be interested in:

• Web Components design system with Thomas Allmer: https://backlight.dev/sessions/coding-design-systems-web-components-design-system-with-thomas-allmer?utm_campaign=sessions%3Acds

• The Clever Cloud Web Components Collection with Hubert Sablonnière: https://backlight.dev/sessions/coding-design-systems-building-content-with-astro-with-matthew-phillips?utm_campaign=sessions%3Acds

• 🪄 Backlight Design Systems Editor: https://backlight.dev/?utm_campaign=sessions%3Acds

• 🐥 m4dz: https://twitter.com/m4d_z