From the version v1.1.3, users may get the following error:

Unhandled Runtime Error
Error: Text content does not match server-rendered HTML.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

This happens because after the version v1.1.2, the first client render will return the users preffered color scheme, but on the server side render it will return no-preference, thus causing this mismatch from the content if it depends on the response from the hook.

I personally do not use Next.js nor other SSR framework, and I am not really sure how to handle such error. If anyone has an anwser please contribute!

@rfoel thanks for creating this hook. it looks great and exactly what i need, but i get the following error when trying to use it in a next.js app :

error - pages/index.tsx (6:49) @ Home
TypeError: use_prefers_color_scheme__WEBPACK_IMPORTED_MODULE_1___default(...) is not a function
  4 | 
  5 | const Home: NextPage = () => {
> 6 |   const prefersColorScheme = usePrefersColorScheme();
    |                                                  ^
  7 |   const isDarkMode = prefersColorScheme === "dark";
  8 | 
  9 |   return (

i've tried importing both the default and named exports and neither way works

here's a reproduction : https://replit.com/@ptrkcsk/use-prefers-color-scheme-nextjs