April 7th, 2025 × #CSS#Accessibility#Frontend
Discussion on adding light and dark modes to sites, considerations when doing so, and new CSS features to help
Wes Bos Host
Scott Tolinski Host
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.
- 19:52 Shoehorning in dark mode.
- 22:25 Other things to consider.
- 22:28 Color contrast.
- 24:39 Logos.
- 25:22 Icons and images.
- 26:20 Accessibility.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads