This content originally appeared on David Walsh Blog and was authored by David Walsh
Seemingly every website, dapp, and app offers a dark mode preference, and thank goodness. Dark mode is especially useful when I’m doing late night coding, or even worse, trading into altcoins. I’m presently working on implementing a dark theme on MetaMask and it got me to thinking: is there a way we can default to dark mode if the user’s operating system also defaults to dark mode?
You can determine if the user’s operating system prefers dark mode with one quick line of code:
const prefersDarkMode = window.matchMedia("(prefers-color-scheme:dark)").matches; // true
This code snippet takes advantage of the CSS prefers-color-scheme media query with JavaScript’s matchMedia API.
From a user experience standpoint, you’ll need to be careful in using this snippet. This method is great for setting a default for new users without changing the value for existing users.
The post Detect Dark Mode Preference with JavaScript appeared first on David Walsh Blog.
This content originally appeared on David Walsh Blog and was authored by David Walsh
David Walsh | Sciencx (2022-02-21T10:42:25+00:00) Detect Dark Mode Preference with JavaScript. Retrieved from https://www.scien.cx/2022/02/21/detect-dark-mode-preference-with-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.