About this episode
Light mode? Dark mode? Scott and Wes break down the best ways to implement theme switching in CSS, from prefers-color-scheme to manual overrides. Plus, tips on handling shadows, icons, and the dreaded flash of dark mode! Show Notes 00:00 Welcome to Syntax! 01:05 Brought to you by Sentry.io . 02:06 Light and dark mode, things to consider. 02:31 Light and dark mode from scratch. drop-in.css . 04:41 Calculations vs assigned color. 05:32 color-mix and relative color. 08:15 Foreground and background variables. –tint-or-shade: color-mix(in oklab, var(–fg), transparent 95%); –tint-or-shade-harder: color-mix(in oklab, var(–fg), transparent 90%); 09:13 Setting color scheme. 12:38 light-dark function in CSS. 15:48 Manually setting dark mode. 18:43 The challenges with shared caching. 19:33 Tailwind CSS implementation. Tailwind dark-mode . 19:52 Shoehorning in dark mode. 22:25 Other things to consider. 22:28 Color contrast. Lea Verou contrast-color . 24:39 Logos. 25:22 Icons and images. 26:20 Accessibility. Polypane . Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads