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! ? Be the ~14,700th person to join our super tasty newsletter bit.ly/syntax_snackpack
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.
04:41 Calculations vs assigned color.
05:32 color-mix and relative color.
08:15 Foreground and background variables.
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.
19:52 Shoehorning in dark mode.
22:25 Other things to consider.
22:28 Color contrast.
24:39 Logos.
25:22 Icons and images.
26:20 Accessibility.
All links available at https://syntax.fm/891
------------------------------------------------------------------------------
Hit us up on Socials!
Syntax: https://x.com/syntaxfm
Scott: https://x.com/stolinski
Wes: https://x.com/wesbos
CJ: https://x.com/CodingGarden
Randy: https://www.youtube.com/@randyrektor
http://www.syntax.fm
Brought to you by Sentry.io
#webdevelopment #webdeveloper #javascript #syntax #syntaxfm #webdev