They discuss the process of implementing different themes in a website, including triggering errors and the hidden themes menu. They also talk about their plans to create a theme developer feature for users to easily add their own theme to the site.
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