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

???? 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

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
wordpress-development-toronto
Joomla-web-development-toronto
magento-web-development-toronto
shopify-web-development-toronto
html-web-development-toronto
Drupal-Web-Development-toronto
square space web development toronto
Contact
Image is not available
We'd love to hear from you.

We’re accepting new projects and would love to hear about yours. Got a question? Let's chat!

Glass Button
Request a Call
Glass Button
Chat Now
Copyright © 2007 – 2025 All rights reserved. Website Design & Web Development Company Located in Toronto, Ontario, Canada.

Yes for your convenience we have premade different packages which includes Logo design, Branding, Hosting, And different types of website.

Request a Call