Discussion on various issues related to working with CSS colors and SVGs, including problems with specifying hex values, the importance of opacity and mixing colors with transparency, the need for relative colors and color contrast, challenges of changing the color of SVGs when loaded as an image, and techniques for manipulating SVGs using CSS.
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