891: Light and Dark Mode

Syntax - Tasty Web Development Treats

Content provided by Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers. All podcast content including episodes, graphics, and podcast descriptions are uploaded and provided directly by Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers or their podcast platform partner. If you believe someone is using your copyrighted work without your permission, you can follow the process outlined here https://podcastplayer.com/legal.

21d ago 27:28

MP3•Episode home

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

898 episodes

#Web Development #Software Development #Tech News #Webdevelopment #Wes Bos #Scott Tolinski - Full Stack JavaScript Web Developers #News #Tech #HTML #CSS #HTML5 #JavaScript

891: Light and Dark Mode

Syntax - Tasty Web Development Treats

4,125 subscribers

published 21d ago

MP3•Episode home

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

898 episodes

#Web Development #Software Development #Tech News #Webdevelopment #Wes Bos #Scott Tolinski - Full Stack JavaScript Web Developers #News #Tech #HTML #CSS #HTML5 #JavaScript

All episodes

Welcome to Player FM!

Player FM is scanning the web for high-quality podcasts for you to enjoy right now. It's the best podcast app and works on Android, iPhone, and the web. Signup to sync subscriptions across devices.

Listen to 500+ topics

Similar to Syntax - Tasty Web Development Treats

Podcasts Worth a Listen

Syntax - Tasty Web Development Treats « » 891: Light and Dark Mode

891: Light and Dark Mode

Podcasts Worth a Listen

Welcome to Player FM!

Similar to Syntax - Tasty Web Development Treats

Syntax - Tasty Web Development Treats « »
891: Light and Dark Mode