Скачать с ютуб localStorage Dark/Light Mode Theme Toggle (CSS/JavaScript) | UI Design в хорошем качестве

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