meta_pixel
Tapesearch Logo
Log in
Syntax - Tasty Web Development Treats

690: How To Dark Mode and Beyond

Syntax - Tasty Web Development Treats

Wes Bos

Tech News, News, Technology

4.91.2K Ratings

🗓️ 8 November 2023

⏱️ 65 minutes

🧾️ Download transcript

Summary

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 Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads

Transcript

Click on a timestamp to play from that location

0:00.0

Hey what's up this is Scott real quick before we get this episode started I wanted to

0:06.1

announce something very exciting we are going to be launching as in right now launching the new syntax and century swag store over at

0:16.6

century dot shop that is s e n t ry dot shop Now on the swag store is a ton of really cool items. In fact we have a

0:28.6

syntax basketball with hand-done graffiti from a local Denver breakdancer.

0:35.9

Also a really awesome webmaster tea that's in this old school style with a construction gift on it. It is like the coolest t-shirt ever.

0:45.8

We also have a syntax logo tee as well as a syntax skateboard. All that and more including a bunch of really awesome Century swag items as well.

0:57.6

Really cool pixelated Century t-shirt. So if any of that sounds exciting to you head on over to Century. Shop.

1:05.0

Now if that stuff sounds interesting to you you'll want to head over to Century Shop today

1:10.0

because I seriously think this stuff is not going to last super long. So Century.

1:16.9

Shop check it out and let us know what you think about the new syntax swag store.

1:22.4

All right let's get going on the episode. about the new syntax swag store.

1:22.9

All right, let's get going on the episode.

1:26.0

You're listening to syntax,

1:27.5

the podcast with the tastiest web development treats out there.

1:30.8

Strap yourself in and get ready. Here is Scott Telinsky and West Boss.

1:35.0

Hey folks, welcome to Syntax. We've got a killer show for you today on how to

1:40.3

implement Dark Mode in your website and let's go as far as to say how to implement dark mode in your website and let's go as far to say how to

1:44.3

implement dark mode and beyond. So Scott and I were talking and dealing with this

1:50.0

quite a bit in the last couple weeks because the syntax site has a dark

1:55.7

mode and hidden themes on there as well. So there are a bunch of gotchas, a bunch of things you need to think about

2:07.0

with when thinking about implementing dark mode and we thought like let's go through

2:11.8

how to implement light in dark mode as well as a whole

...

Please login to see the full transcript.

Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.

Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.

Copyright © Tapesearch 2026.