690: How To Dark Mode and Beyond

Hosted byWes Bos

In this episode of Syntax, Wes and Scott talk about the process they are using for extending the Syntax website with themes, including a dark mode and secret custom themes. They also talk about issues encountered with theming and CSS, including flashes of un-themed content.
Show Notes • 00:00 Syntax + Sentry Announcement!

• 01:35 Welcome
• 02:23 Syntax Brought to you by Sentry
• 03:16 How to implement a theme
• 10:27 Writing the CSS
• 11:38 Glasses wearers protip
• 13:02 Class on the body and server side rendering issue
• 14:02 CSS Variables
• 15:05 Color variables in CSS
• 21:07 Working in half pixel sizes
• 22:40 Variable usage
• 25:23 Naming variables after what they style
• 30:42 Component level variables
• 33:27 Using zones
• 38:41 Themes should be defined as light or dark
• 39:20 Issues: Moving from light to dark
• 42:29 Issues: Drop shadow in dark mode
• 44:00 Issues: Flash of unthemed content
• 44:40 Issues: Opacity values
• 49:45 Issues: SVG need change color
• 55:56 Help is on the way!
• 59:57 SIIIIICK ××× PIIIICKS ×××
• website/src/styles/themes/level-up.css at v2
• The 2023 State of CSS Survey Part 2 × CSS Frameworks × Tooling × Browser Usage
• “color-contrast” | Can I use… Support tables for HTML5, CSS3, etc
• The Future of CSS: Easy Light-Dark Mode Color Switching with light-dark() – Bram.us

××× SIIIIICK ××× PIIIICKS ××× • Scott: Kala (@engineer.everything)

Shameless Plugs • Scott: Sentry

• Wes: Wes Bos Tutorials

Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads