Up usehooks ts

[technophile-04]

Description

Updated all the usehooks-ts package, it seems that useDarkMode is (broken still)*.

I tried both our custom useDarkMode and useDarkMode from usehooks-ts.

For some strange reason it borken on my arc browser but it works fine Chrome! :(

Screen.Recording.2024-02-08.at.12.02.12.AM.mov

I think one of the main reason might be both rely on useMediaQueryHook which relies on (prefers-color-scheme: dark) as I read few discussions it might be the case even though user OS is set to light, some browser extension or browser itself can force (prefers-color-scheme) to be dark or light

Would love it if others could test, will try to dig more on this also please feel free to suggest any other approaches to handle it 🙌

Also a question :

What if we use some alternate approaches to handle theme ? Which will handle both flickering of theme on initial render (when dark mode is choosen) and also handle this theme switch logic ?

It seems people tend to use:

1. next-theme
2. cookie approachs ( 1 & 2 ),
3. inserting script tag approach

[Pabl0cks]

Nice job @technophile-04, digging so fast into the problem, documenting it and trying this approach 🙌

Would love it if others could test, will try to dig more on this also please feel free to suggest any other approaches to handle it 🙌

Here are the results of my first tests in Chrome and Firefox (both working equal for me):

• With OS (Windows) in dark mode:
  • Turning ON Light mode in SE-2, without contracts deployed, Debug tab works fine. Disconnect+Connect wallet turns it to Dark
  • Turning ON Light mode in SE-2, with contracts deployed, Debug tab and Disconnect+Connect wallet turns it to Dark mode
• With OS (Windows) in light mode:
  • Everything works fine, SE-2 Light does not change to Dark on any action and vice versa.

[technophile-04]

With OS (Windows) in dark mode

Yeah !, really weird happens with me too

Thanks @Pabl0cks for the really nice testing and reproduction as always !!!

---

After debugging a lot for useDarkMode nothing works properly even tried tinkering with custom useDarkMode but no luck :(, but would love if someone could give a shot !

Create #712 with next-themes, I think its worth giving a control to the library since it handles most of the cases very nicely (like flickering, etc too).

At the beginning, I thought it's not worth using the whole library just to handle the theme but digging a bit deep in the NextJS context I think its worth using due to all the caveats present, and handling them ourselves properly might be a pain.

[technophile-04]

Tysm all, Merging this 🙌!