[feature] is-dark-mode — know if user has applied/requested dark mode with system/client side.

[iamkarshe]

Feature description

Using useHasDarkMode know if user has dark mode already being used in client side so we can directly apply dark theme variant on load.

Some code which can help us in making this feature.

• Knowing dark mode.

  const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

• Keeping track of change.

  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
  if (event.matches) {
      console.log('Dark mode has been enabled');
  } else {
      console.log('Dark mode has been disabled');
  }
  });

Affected component/components

No response

Additional Context

No response

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues and PRs

[iamkarshe]

I guess we can use useMediaQuery but I thought we can provide one abstract-level for Dark mode specific hook.

https://hooks.scriptkavi.com/docs/hooks/media-query

[iamkarshe]

Kind of preferred-language we can have preferred-mode https://hooks.scriptkavi.com/docs/hooks/preferred-language

const mode = usePreferredScreenMode() // ['system-light', 'system-dark', 'light', 'dark']

[sunnynk19]

Hi @iamkarshe , Makes sense. We can work on it. If possible, you can raise a pull request if you have the hook already available. Or I can do it when I get time.

Thanks for the suggestion.

[sunnynk19]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.