891: Light and Dark Mode

Hosted byWes Bos

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