Practical Refactors With Modern CSS Colors
🌲 Join us at CascadiaJS 2027! https://luma.com/cascadiajs-2027
Recorded live at CascadiaJS 2026 in Seattle.
Speaker: James Steinbach
Practical refactors with modern CSS colors: a hands-on talk on simplifying color tokens, dark mode, and theming using modern CSS. Fewer variables, less duplication, clearer intent—using light-dark(), relative colors, and more.
00:00 Introduction: Modern CSS Colors
00:59 The Problem with Traditional Light/Dark Mode Theming
03:50 Simplifying Themes with light-dark()
06:05 Cutting Thousands of Lines of CSS
07:12 Tailwind CSS and Modern Theming
07:47 Relative Colors: Dynamic Color Manipulation in CSS
10:37 Understanding the "from" Syntax
12:12 Real-World Uses: Tinting, Alpha, and Color Palettes
15:29 Replacing Sass Mixins with Native CSS
18:01 color-mix(): Mixing Colors in the Browser
19:12 Accessibility Win: contrast-color()
20:13 Advanced Contrast and Color Combinations
21:03 Browser Support, Resources, and Wrap-Up
Watch more CascadiaJS 2026 talks:
• CascadiaJS 2026