How To Build An Advanced Light/Dark Theme Toggle

JavaScript / Web 91.9K צפיות 22/02/2020
פתח ב-YouTube

דרג סרטון זה

התחבר כדי לדרג

תיאור

Theme toggles are a fairly simple concept, so in this video I decided to take a theme toggle to the next level by creating animations around the theme switch. These animations lead to a really fun project that covers CSS custom properties, CSS specificity and so much more. 📚 Materials/References: GitHub Code: https://github.com/WebDevSimplified/Advanced-Theme-Toggle CodePen Code: https://codepen.io/WebDevSimplified/pen/KKpNqyB Emmet Tutorial: https://youtu.be/V8vizNQKtx0 Material Design Icons: https://materialdesignicons.com/ 🧠 Concepts Covered: - How to use CSS custom properties - How to handle CSS transitions - CSS position context - Managing document overflow 🌎 Find Me Here: My Blog: https://blog.webdevsimplified.com My Courses: https://courses.webdevsimplified.com Patreon: https://www.patreon.com/WebDevSimplified Twitter: https://twitter.com/DevSimplified Discord: https://discord.gg/7StTjnR GitHub: https://github.com/WebDevSimplified CodePen: https://codepen.io/WebDevSimplified #ThemeToggle #WDS #LightDarkMode

#Web Dev Simplified