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 ×××

××× 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

Episode 140: Options When Coming Out of Forbearance