use next-themes for handling theme

[technophile-04]

Description

Background #707, This works nicely and also fixes the flickering issue.

next-themes seems like an popular library and used by ShadCn and NextUI

This also fixes #709

Test App : https://usehooks-ts-test.vercel.app/

the only downside is currently it does not hot react to theme changes of system preference (at the OS level). Although can be easily handled if we give the user an extra choice "System" instead of only 2 :

PS: It defaults to user's OS theme when user very first time visit the website, after that if he switches the theme manually then it doesn't react to OS changes

[Pabl0cks]

Really nice job @technophile-04 exploring this option! 🙌

It's working great to me in both Dark and Light OS 👌

I had a super small issue in your deployed example, where the day/night radio button was moving a few pixels above the initial render when doing F5. In localhost it was working fine, and when I deployed to Vercel it was working fine too. Not big deal anyways, was only happening when forcing the refresh, not when changing tabs.

[technophile-04]

I had a super small issue in your deployed example, where the day/night radio button was moving a few pixels above the initial render when doing F5.

Ohh yeah, actually saw it was not happening on localhost more importantly on chains.hardhat because we have Faucet button and BlockExplorer buttons present always there, when I deployed to vercel I switched to sepolia because of which the ETH price button was popping up a bit late which was causing SwitchTheme to change its height

Screen.Recording.2024-02-11.at.1.57.09.AM.mov

But fixed at 677cd37 by giving it some definite height so that it doesn't change

Here is test app https://usehooks-ts-test.vercel.app/

Thanks Pablo 🙌

[Pabl0cks]

Ohh yeah, actually saw it was not happening on localhost more importantly on chains.hardhat because we have Faucet button and BlockExplorer buttons present always there, when I deployed to vercel I switched to sepolia because of which the ETH price button was popping up a bit late which was causing SwitchTheme to change its height

Nice catch and fix!

[rin-st]

completely agree with you here #707 (comment)

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.

tested it and works great for me
great job as always!