dark - toggle in reactjs

So Im going to create a portfolio for me , And I get some template and thinking about adding Dark-light toggle on that , i asked chatGpt and it gives as that we need to store the value ( light or dark on Local storage) and gets based on that , is there any other way other than using local storage orcan we get users system theme ?? In reactjs
2 Replies
Chris Bolson
Chris Bolson2w ago
You can get the users preferred color scheme using CSS prefers-color-scheme More info can be found on mdn If you need/want to override that, local storage is a good way to go.
MDN Web Docs
prefers-color-scheme - CSS: Cascading Style Sheets | MDN
The prefers-color-scheme CSS media feature is used to detect if a user has requested light or dark color themes. A user indicates their preference through an operating system setting (e.g. light or dark mode) or a user agent setting.
vic
vicOP2w ago
I see Thanks I will check it out

Did you find this page helpful?