dark-mode-switch icon indicating copy to clipboard operation
dark-mode-switch copied to clipboard

Detect if user has prefers-dark-mode setting on

Open popoway opened this issue 5 years ago • 2 comments

initTheme() reads system dark mode settings and apply, if no darkSwitch localStorage is found.

popoway avatar Dec 02 '19 21:12 popoway

hey there! thanks for the PR. This looks good! A couple of things though:

  • If a user has a system/browser dark-mode setting ON then when they visit the page the page will be dark. If they'd switch the dark-mode switch off on the page then that setting won't be saved as it removes the localStorage 'darkSwitch: dark' key. I think we should change the key name from 'darkSwicth' to 'darkMode' - and then have settings which are saved for both 'on' and 'off'. That way a user in dark mode could browse the site in light-mode if they wish. What do you think?

  • Using the system-preference for dark-mode is a great feature and I think setting the theme based on that will be useful for many sites, but I think it should be able to be opt-in (or opt-out) by the developer. I'm not too sure where that setting should be set though. Any thoughts on that? Maybe something like this does it: https://darkmodejs.learn.uno/#%E2%9A%99%EF%B8%8F-options

coliff avatar Dec 12 '19 13:12 coliff

This PR seems to be abandoned? Any news on that? I think this is a useful feature/good to merge…

rugk avatar Aug 12 '21 21:08 rugk