Default to System Color Scheme Preference for Initial Color Mode

[JeHwanYoo]

Hi,

Thank you for the great work on this library! I have a suggestion to improve the user experience by allowing the initial color mode to default to the user's system preference (e.g., dark or light mode). This would make the application feel more integrated with the user's device settings.

Proposal:

Modify the initial value of useLocalStorage to detect the system color scheme and use it as the default value. Here's a potential code snippet to illustrate the idea:

const [colorMode, setColorMode] = useLocalStorage(
  'color-theme',
  window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light',
)

Benefits:

• Seamless Integration: Users will have a more consistent experience across devices, as the application will match their system settings.
• Improved User Experience: New users will see their preferred color scheme without needing to manually change the settings.
• Accessibility: Helps users who have set dark or light mode preferences due to accessibility needs.

I believe this enhancement would greatly improve the default behavior of the library. Thank you for considering this suggestion, and please let me know if there's any further information or assistance I can provide!

[JeHwanYoo]

Oh, I think this issue should be moved to the ‘react’ or ‘next.js’ template. Could you move the issue, please?