891: Light and Dark Mode
O epizodě podcastu
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
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
Popis podcastu
Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.