How To Build An Advanced Light/Dark Theme Toggle
Web Dev Simplified Web Dev Simplified
1.59M subscribers
88,296 views
0

 Published On Feb 22, 2020

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/A...
CodePen Code: https://codepen.io/WebDevSimplified/p...
Emmet Tutorial:    • Learn Emmet In 15 Minutes - Double Yo...  
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:   / webdevsimplified  
Twitter:   / devsimplified  
Discord:   / discord  
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


#ThemeToggle #WDS #LightDarkMode

show more

Share/Embed