Dark/Light Mode Theme Toggle (CSS/Basic 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 basic 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 last two videos, I showed you how to do this using only CSS. This time we are going to look at another method that uses very basic JavaScript.
I still have one more way to implement a mode picker after this video. It's going to use a bit more JavaScript and keep track of the users preference. So stay tuned for that.
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/qBb...
Chapters:
00:00 - Intro
00:51 - HTML
04:13 - CSS
19:42 - JavaScript
_____________________________________
📚 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 (...
Example 2: • User-Defined Dark/Light Mode (CSS ONL...
Example 4: • localStorage Dark/Light Mode Theme To...
_____________________________________
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 #CSS #darkmode
Watch video Dark/Light Mode Theme Toggle (CSS/Basic JavaScript) | UI Design online without registration, duration hours minute second in high quality. This video was added by user codeSTACKr 10 July 2020, don't forget to share it with your friends and acquaintances, it has been viewed on our site 6,095 once and liked it 202 people.