So basically I'm using a hook that generates keys in the localStorage, but since I want a specific key to be used and the initial load of the app I need to initialize it as high as possible so I chose Providers.tsx since it's client sided.

"use client";

import { ThemeProvider } from "./theme-provider";
import { useLocalStorage } from "@uidotdev/usehooks";

export default function Providers({ children }: { children: React.ReactNode }) {
  const [] = useLocalStorage("accent", "blue");

  return (
    <ThemeProvider
      attribute="class"
      defaultTheme="light"
      enableSystem
      disableTransitionOnChange
    >
      {children}
    </ThemeProvider>
  );
}

I do it like this and later reuse the hook. You think its a good appraoch or not? I'm not really sure so any suggestions would be appreciated 🙂