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.


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


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


Play / pause the audio
Minimize / expand the player
Mute / unmute the audio
Seek backward 30 seconds
Seek forward 30 seconds
Increase playback rate
Decrease playback rate
Show / hide this window