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 (...
Example 2: • User-Defined Dark/Light Mode (CSS ONL...
Example 3: • Dark/Light Mode Theme Toggle (CSS/Bas...
_____________________________________
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
Auf dieser Seite können Sie das Online-Video localStorage Dark/Light Mode Theme Toggle (CSS/JavaScript) | UI Design mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer codeSTACKr 14 Juli 2020 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 3,119 Mal angesehen und es wurde von 105 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
