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 ×××
Shameless Plugs
Hit us up on Socials!
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
