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 Welcome to...
Syntax - Tasty Web Development Treats · Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers
Audio is streamed directly from the publisher (traffic.megaphone.fm) as published in their RSS feed. Play Podcasts does not host this file. Rights-holders can request removal through the copyright & takedown page.
Show Notes
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.
- 19:52 Shoehorning in dark mode.
- 22:25 Other things to consider.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads