891: Light and Dark Mode

0 Anmeldelser
0
Episode
892 of 909
Længde
27M
Sprog
Engelsk
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


Lyt når som helst, hvor som helst

Nyd den ubegrænsede adgang til tusindvis af spændende e- og lydbøger - helt gratis

  • Lyt og læs så meget du har lyst til
  • Opdag et kæmpe bibliotek fyldt med fortællinger
  • Eksklusive titler + Mofibo Originals
  • Opsig når som helst
Prøv nu
DK - Details page - Device banner - 894x1036

Other podcasts you might like ...