fix: support dark mode for safari < 14 using matchMedia().addListener

[yunsteel]

Issue:

Closes #494

What has been done:

To support Safari, a try-catch block was added around addEventListener.
matchMedia().addEventListener is supported starting from Safari 14, while the addListener method should be used for versions prior to Safari 14. As a result, some users are now experiencing errors.

Screenshots/Videos:

N/A

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
sonner	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 15, 2024 2:54am

[yunsteel]

I solved the problem by adding polyfill as below.

        if (typeof window !== 'undefined' && !window.matchMedia('').addEventListener) {
        const originalMatchMedia = window.matchMedia;

        window.matchMedia = (query) => {
          const mediaQueryList = originalMatchMedia(query);

          if (!mediaQueryList.addEventListener) {
            mediaQueryList.addEventListener = (e, handler) => mediaQueryList.addListener(handler);
            mediaQueryList.removeEventListener = (e, handler) => mediaQueryList.removeListener(handler);
          }

          return mediaQueryList;  
        };
      }