Wes Bos & Scott Tolinski - Full Stack JavaScrip...

Zpravodajství

Technologické zprávy

Technika

891: Light and Dark Mode

Syntax - Tasty Web Development Treats

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.

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

Aplikace Youradio Talk

891: Light and Dark Mode

Poslechněte si podcast