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