Search

Home > Syntax - Tasty Web Development Treats > 690: How To Dark Mode and Beyond
Podcast: Syntax - Tasty Web Development Treats
Episode:

690: How To Dark Mode and Beyond
Category: Technology
Duration: 01:04:55
Publish Date: 2023-11-08 13:00:00
Description:

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
Total Play: 0

Users also like

1K+ Episodes
Freakonomics .. 2K+     100+