localStorage Dark/Light Mode Theme Toggle (CSS/JavaScript) | UI Design

Описание: 🆓 Download the PDF, front-end roadmap for FREE to keep you on track!
https://courses.codestackr.com/front-...

In this video, we are going to build a simple dark & light mode theme toggle using CSS and JavaScript. You can add this to any UI design.

There are several ways that we can implement themes. Generally, these only choose between light and dark mode, but any color scheme could be a choice. Giving the user the ability to choose a theme in your UI design will increase your user experience (UX).

In the first two videos in this series, I showed you how to do this using only CSS. Then, in the third video, we used very basic JavaScript.

In this final video, we are going to use a bit more JavaScript and keep track of the users' preference using localStorage.

There will also be some extra cool things thrown in throughout each video. So be sure to watch it to the end.

If this video helps you out, help me out by liking the video and subscribing for more videos like this.

Codepen: https://codepen.io/codeSTACKr/pen/Rwr...

Chapters:
00:00 - Intro
00:49 - HTML (Buttons)
02:14 - CSS (Buttons)
09:36 - CSS (Dark/Light)
12:40 - JavaScript (Initial)
14:53 - HTML (Images)
16:27 - CSS (Images)
24:10 - JavaScript (localStorage)
_____________________________________

📚 Learn to CODE in just a FEW months here:
Treehouse Discount Code: https://treehouse.7eer.net/codeSTACKr
_____________________________________

🛠️ Tools I use:
🟠 Theme: https://marketplace.visualstudio.com/...
🟠 Font: STACKr Code (Exclusive to my VS Code Course - https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/...

🚢 Deploy for FREE on Vercel: https://vercel.com/ambassadors/codest...
_____________________________________

💖 Show support!
Patreon:   / codestackr  
PayPal: https://paypal.me/codeSTACKr
_____________________________________

** Dark/Light Examples **
Example 1:    • Simple Dark/Light Mode Theme Toggle (CSS O...  
Example 2:    • User-Defined Dark/Light Mode (CSS ONLY) | ...  
Example 3:    • Dark/Light Mode Theme Toggle (CSS/Basic Ja...  
_____________________________________

Connect With Me:
Website: http://www.codestackr.com
Twitter:   / codestackr  
Instagram:   / codestackr  
Facebook:   / codestackr  
_____________________________________

** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.

#codeSTACKr #vscode #learntocode