November 8th, 2023 × #dark mode#theming#web development
How To Dark Mode and Beyond
Scott and Wes discuss how to implement dark mode and theming in web development, including topics like using color variables, overriding system preferences, solving contrast issues, theming components, and more.
Wes Bos Host
Scott Tolinski Host
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
