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-end-web-developer-roadmap-2020

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/RwrBeMG

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/items?itemName=codestackr.codestackr-theme
🟠 Font: STACKr Code (Exclusive to my VS Code Course - https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions

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

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

** Dark/Light Examples **
Example 1: https://youtu.be/b4FBTr5pSgw
Example 2: https://youtu.be/BeySzvnE6Ew
Example 3: https://youtu.be/Co9rNzQoZg0
_____________________________________

Connect With Me:
Website: http://www.codestackr.com
Twitter: https://twitter.com/codeSTACKr
Instagram: https://instagram.com/codeSTACKr/
Facebook: https://facebook.com/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

Тэги:

#dark_mode #light_mode #dark_theme #dark_light_toggle #night_mode #dark_mode_css #dark_mode_toggle #dark_mode_tutorial_css #dark_mode_with_css_variables #dark_light_mode #dark_light_web_design #dark_light_mode_ui_design #ui_design #light_dark_mode_css #light_dark_mode_tutorial #light_dark_mode_toggle #light/dark_mode #css_dark_mode #dark_light_mode_css #dark_mode_javascript #dark_mode_local_storage #dark_mode_javascript_toggle_using_localstorage #javascript_local_storage

Скачать видео