dark-mode-demo | A Complete Guide to the Dark Mode Toggle : A Demo | Theme library
kandi X-RAY | dark-mode-demo Summary
kandi X-RAY | dark-mode-demo Summary
A Complete Guide to the Dark Mode Toggle: A Demo
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of dark-mode-demo
dark-mode-demo Key Features
dark-mode-demo Examples and Code Snippets
Community Discussions
Trending Discussions on dark-mode-demo
QUESTION
I'm attempting to create a "dark mode" toggle - which is working great. However, I would like the initial state to use the users dark/light preference.
The issue is prefersDarkMode
appears to be set to false
on load. It changes to true
after the page fully loads (if you prefer dark mode) - but the darkState
is already set to false
by that point.
Is there a better way to handle this? I'm essentially looking for the same behavior that's on the https://material-ui.com/ website (user preference as the default state, with the ability to toggle dark/light mode).
Demo: https://codesandbox.io/s/dark-mode-demo-with-user-preference-fallbck-ltk09?file=/demo.js:220-807
...ANSWER
Answered 2020-Jul-24 at 18:41You can add an useEffect call, with prefersDarkMode as dependency, once this value changes the callback will be invoked Something like this,
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install dark-mode-demo
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page