891: Light and Dark Mode

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