891: Light and Dark Mode

0 Recensioner
0
Episod
892 of 915
Längd
27min
Språk
Engelska
Format
Kategori
Fakta

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


Lyssna när som helst, var som helst

Kliv in i en oändlig värld av stories

  • 1 miljon stories
  • Hundratals nya stories varje vecka
  • Få tillgång till exklusivt innehåll
  • Avsluta när du vill
Starta erbjudandet
SE - Details page - Device banner - 894x1036

Andra podcasts som du kanske gillar...