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
Nyd den ubegrænsede adgang til tusindvis af spændende e- og lydbøger - helt gratis
Dansk
Danmark