Building a Light/Dark Dashboard, Part 5

Опубликовано: 11 Октябрь 2024
на канале: Coder Coder

25,064

780

🔥 My course: Responsive Design for Beginners! https://coder-coder.com/responsive/

💻 Become a full-stack web dev with Zero to Mastery: https://academy.zerotomastery.io/a/af...

In this video I build the dark/light toggle and let it be controlled by the user's system preferences and local storage, and manually controlled with the toggle. The dark/light theme is switched by using JavaScript and CSS variables / custom properties.

Full playlist:    • Building a Light/Dark Dashboard
Source code on GitHub: https://github.com/thecodercoder/fem-...
Challenge on Frontend Mentor: https://www.frontendmentor.io/challen...
Live website: https://codercoder-darklight-toggle.p...

0:00 - Intro
0:30 - Changing the toggle to a 2-option based on feedback
20:46 - Use system preferences to load light or dark theme
44:27 - Build the toggle logic to manually change light/dark theme
1:09:36 - Save toggle settings in local storage

Resources:
Andy Bell - Create a user controlled dark or light mode -- https://piccalil.li/tutorial/create-a...

____________________________

SUPPORT THE CHANNEL
⭐ Join channel members and get perks:    / @thecodercoder
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme: https://marketplace.visualstudio.com/...

WANT TO LEARN WEB DEV?
Check out my courses:
🌟 Responsive Design for Beginners: https://coder-coder.com/responsive/
🌟 Gulp for Beginners: https://coder-coder.com/gulp-course/

RECOMMENDATIONS
⌨ My keyboard-- get 10% off with code THECODERCODER -- https://vissles.com/?ref=mu96kxst5w
💻 Other gear -- https://www.amazon.com/shop/thecoderc...
📚 My Favorite Books -- https://coder-coder.com/best-web-deve...
📺 My Favorite Courses -- https://coder-coder.com/best-web-deve...

🔽 FOLLOW CODER CODER
Blog -- https://coder-coder.com/
Twitter --   / thecodercoder
Instagram --   / thecodercoder

#webdevelopment #coding #programming