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

Channel:
United States codeSTACKr
Subscribers:
296,000
Published on ● Video Link: https://www.youtube.com/watch?v=_raOFZAYXD4


Duration: 29:38
3,017 views
108

πŸ†“ 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



Other Videos By codeSTACKr


2020-08-27How To Build A React App w/ Hooks & Airtable API | styled-components | Code Quality Check
2020-08-21UPDATE: VS Code July 2020 Stable Release | Settings Sync | Browser Debugging
2020-08-15UPDATE: Next Level GitHub Profile README (NEW) | GitHub Actions | Vercel | Spotify
2020-08-13SPEED RUN: Build a CRUD API with PrestoAPI & MongoDB Atlas in 9 Minutes! Then Airbnb Clone!
2020-08-11Building BATTLESHIPS Multiplayer Game with Node.js, Express, Socket.io, Heroku | (2/3)
2020-08-07GSAP Typing Animation | Tween & Timeline Basics (2020)
2020-07-29Next Level GitHub Profile README (NEW) | How To Create An Amazing Profile ReadMe With GitHub Actions
2020-07-24There's more to CONSOLE than .log( ) | Things you didn't know console could do!!
2020-07-23Simple React.js User Login Authentication | Auth0
2020-07-16Top 10 VS Code Updates You Don't Know About!! (2020)
2020-07-14localStorage Dark/Light Mode Theme Toggle (CSS/JavaScript) | UI Design
2020-07-10Dark/Light Mode Theme Toggle (CSS/Basic JavaScript) | UI Design
2020-07-07Limited Offer! The Frontend Developer Career Path (@Scrimba)
2020-07-06User-Defined Dark/Light Mode (CSS ONLY) | UI Design Theme (prefers-color-scheme)
2020-07-03Simple Dark/Light Mode Theme Toggle (CSS ONLY) | UI Design
2020-06-265 Steps to THINK in React and Easily Create a ReactJS App From Scratch! (Bonus: Tailwind CSS)
2020-06-20How To Change CSS Values With A Slider! - CSS Custom Properties (Variables) & JavaScript
2020-06-13Microinteractions: Awesome Password Validation Animation
2020-06-05Developer Survey 2020 - Check Out These Shocking Results! (Stack Overflow)
2020-06-03Notion + YouTube - A Powerful Combination for Productivity
2020-05-29How to use Regular Expressions (RegEx) in JavaScript | Tutorial in UNDER 20 Minutes (2020)


Tags:
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