Syntax - Tasty Web Development Treats

891: Light and Dark Mode


Listen Later

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

...more
View all episodesView all episodes
Download on the App Store

Syntax - Tasty Web Development TreatsBy Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

  • 4.9
  • 4.9
  • 4.9
  • 4.9
  • 4.9

4.9

966 ratings


More shows like Syntax - Tasty Web Development Treats

View all
Hanselminutes with Scott Hanselman by Scott Hanselman

Hanselminutes with Scott Hanselman

378 Listeners

Software Engineering Radio - the podcast for professional software developers by se-radio@computer.org

Software Engineering Radio - the podcast for professional software developers

265 Listeners

.NET Rocks! by Carl Franklin and Richard Campbell

.NET Rocks!

245 Listeners

The Changelog: Software Development, Open Source by Changelog Media

The Changelog: Software Development, Open Source

286 Listeners

Thoughtworks Technology Podcast by Thoughtworks

Thoughtworks Technology Podcast

41 Listeners

Talk Python To Me by Michael Kennedy

Talk Python To Me

583 Listeners

Software Engineering Daily by Software Engineering Daily

Software Engineering Daily

630 Listeners

Soft Skills Engineering by Jamison Dance and Dave Smith

Soft Skills Engineering

272 Listeners

Python Bytes by Michael Kennedy and Brian Okken

Python Bytes

213 Listeners

The freeCodeCamp Podcast by freeCodeCamp.org

The freeCodeCamp Podcast

484 Listeners

CoRecursive: Coding Stories by Adam Gordon Bell - Software Developer

CoRecursive: Coding Stories

185 Listeners

The Stack Overflow Podcast by The Stack Overflow Podcast

The Stack Overflow Podcast

63 Listeners

The Real Python Podcast by Real Python

The Real Python Podcast

137 Listeners

PodRocket - A web development podcast from LogRocket by LogRocket

PodRocket - A web development podcast from LogRocket

58 Listeners

The Pragmatic Engineer by Gergely Orosz

The Pragmatic Engineer

51 Listeners