891: Light and Dark Mode

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!

• Welcome to Syntax!
• Brought to you by Sentry.io.
• Light and dark mode, things to consider.
• Light and dark mode from scratch.
  • drop-in.css.
  • Calculations vs assigned color.
  • color-mix and relative color.
  • 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%);
  • Setting color scheme.
  • light-dark function in CSS.
• Manually setting dark mode.
  • The challenges with shared caching.
  • Tailwind CSS implementation.
    • Tailwind dark-mode.
• Shoehorning in dark mode.
• Other things to consider.
  • Color contrast.
    • Lea Verou contrast-color.
  • Logos.
  • Icons and images.
  • Accessibility.
    • Polypane.

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads