How to Handle Dark Mode with CSS and JavaScript - SVG Toggle Button Tutorial
How can we detect dark mode in CSS and JavaScript? How can we manually override it with a toggle button? And how do we save our setting in localStorage? In this quick tutorial, we look into detecting dark mode in CSS and JavaScript and then create a toggle button with SVG to override the default behavior.
Source code: https://github.com/HunorMarton/gorillas
Learn more about SVGs: https://svg-tutorial.com/
𝕏 — / hunorborbely
Buy Me a Coffee: https://www.buymeacoffee.com/hunor
Website — http://hunormarton.github.io
And more — https://bio.link/hunor
0:00 - Introduction
0:22 - Handling dark mode in CSS
2:06 - Sun Icon with SVG
4:37 - Detecting dark mode in JavaScript
6:33 - Moon Icon with SVG
9:27 - Toggle dark move with JavaScript
11:59 - Saving the user setting to localStorage
13:03 - Next Steps
#javascript #darkmode #svg
On this page of the site you can watch the video online How to Handle Dark Mode with CSS and JavaScript - SVG Toggle Button Tutorial with a duration of hours minute second in good quality, which was uploaded by the user Hunor Márton Borbély 07 March 2024, share the link with friends and acquaintances, this video has already been watched 3,848 times on youtube and it was liked by 91 viewers. Enjoy your viewing!
