Simple Dark/Light Mode Theme Toggle (CSS ONLY) | 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 ONLY CSS! 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 next several videos I’m going to show you the different ways that you can accomplish this. There will also be some extra cool things thrown in throughout each video. So be sure to watch it to the end.
The example that we’ll build today is probably the easiest way to implement a mode picker. 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/JjGOWvJ
Chapters:
00:00 – Intro
00:40 – HTML
02:25 – CSS
_____________________________________
đź“š 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!
PayPal: https://paypal.me/codeSTACKr
_____________________________________
** Dark/Light Examples **
Example 2: https://youtu.be/BeySzvnE6Ew
Example 3: https://youtu.be/Co9rNzQoZg0
Example 4: https://youtu.be/_raOFZAYXD4
_____________________________________
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 #CSS #Theme
source
