Syntax - Tasty Web Development Treats cover image

690: How To Dark Mode and Beyond

Syntax - Tasty Web Development Treats

Color Contrast and Manipulation in Web Development

6min Snip

00:00

Play full episode

Summary

Transcript

Episode notes

This chapter explores solutions for color contrast and manipulation in web development, including the use of color contrast for accessibility, relative color manipulation using variables, and the scalability of a light dash dark helper method. The hosts also discuss the shorthand syntax for setting color schemes and the idea of defining theme variations through a variable on the root element.

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

Scott: Kala (@engineer.everything)

Shameless Plugs

Scott: Sentry
Wes: Wes Bos Tutorials

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Get the Snipd
podcast app

Unlock the knowledge in podcasts with the podcast player of the future.

App store banner

Play store banner

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode

Save any
moment

Hear something you like? Tap your headphones to save it with AI-generated key takeaways

Share
& Export

Send highlights to Twitter, WhatsApp or export them to Notion, Readwise & more

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode