Slide 3

Latest Updates

In a world of infinite possibilities, Ability is everything. We develop Website & Mobile app for Business.

Switching dark/light mode with JS and CSS custom properties | FEM social media dashboard, Part 5

(Source Youtube)

???? My course: Responsive Design for Beginners! https://coder-coder.com/responsive/ ???? Become a full-stack web dev with Zero to Mastery: https://academy.zerotomastery.io/a/aff_338z7xnj/external?affcode=441520_ti97uk6b In this video I build the

???? My course: Responsive Design for Beginners! https://coder-coder.com/responsive/

???? Become a full-stack web dev with Zero to Mastery: https://academy.zerotomastery.io/a/aff_338z7xnj/external?affcode=441520_ti97uk6b

In this video I build the dark/light toggle and let it be controlled by the user's system preferences and local storage, and manually controlled with the toggle. The dark/light theme is switched by using JavaScript and CSS variables / custom properties.

Full playlist: https://www.youtube.com/playlist?list=PLUWqFDiirlsu5az5EIyxe8ZddyNO_kDuP

Source code on GitHub: https://github.com/thecodercoder/fem-dklt-toggle

Challenge on Frontend Mentor: https://www.frontendmentor.io/challenges/social-media-dashboard-with-theme-switcher-6oY8ozp_H

Live website: https://codercoder-darklight-toggle.pages.dev/

0:00 - Intro

0:30 - Changing the toggle to a 2-option based on feedback

20:46 - Use system preferences to load light or dark theme

44:27 - Build the toggle logic to manually change light/dark theme

1:09:36 - Save toggle settings in local storage

Resources:

Andy Bell - Create a user controlled dark or light mode -- https://piccalil.li/tutorial/create-a-user-controlled-dark-or-light-mode/

____________________________

SUPPORT THE CHANNEL

⭐ Join channel members and get perks: https://www.youtube.com/channel/UCzNf0liwUzMN6_pixbQlMhQ/join

???????? Hit the THANKS button in any video!

???? Get my VS Code theme: https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme

WANT TO LEARN WEB DEV?

Check out my courses:

???? Responsive Design for Beginners: https://coder-coder.com/responsive/

???? Gulp for Beginners: https://coder-coder.com/gulp-course/

RECOMMENDATIONS

⌨ My keyboard-- get 10% off with code THECODERCODER -- https://vissles.com/?ref=mu96kxst5w

???? Other gear -- https://www.amazon.com/shop/thecodercoder?listId=1LMCKGUTMVYXD

???? My Favorite Books -- https://coder-coder.com/best-web-development-books/

???? My Favorite Courses -- https://coder-coder.com/best-web-development-courses/

???? FOLLOW CODER CODER

Blog -- https://coder-coder.com/

Twitter -- https://twitter.com/thecodercoder

Instagram -- https://www.instagram.com/thecodercoder

#webdevelopment #coding #programming

Why you’re not progressing (and how to fix it)

Blog

01-26-2021

Why you’re not progressing (and how to fix it)

After seeing thousands of designers go through our courses, there's something I've come to notice that makes or breaks a designer. A well-rounded designer who is pretty

Slide

From a small room table to large meeting rooms

We’re working with companies of all sizes ranging from startups to large scale business industries! We have extensive experience working with companies in Canada, USA and global to help them build a great website and effectively improve their ROI.

Slide