[bug]: documentation wrong regarding adding next-themes

[samislam]

Describe the bug

The enabling dark-mode section in the documentation here shows the way to enable dark-mode by installing next-themes. and it says "create a new file with the name ThemeProvider and add the 'use client' directive there". Now there's no need for that because ThemeProvider from next-themes is already a client component.

Doing the method described in the docs causes the error:

app-index.js:33 Warning: Extra attributes from the server: class,style
    at html
    at RootLayout (Server)
    at RedirectErrorBoundary... etc

Read the section of this in docs of next-themes here

They say:

Note that ThemeProvider is a client component, not a server component.

Affected component/components

everything

How to reproduce

Do the exact same steps described in the docs here.

side note: stackbilitz may not show the error

Codesandbox/StackBlitz link

https://stackblitz.com/edit/next-themes-shadcnui?file=app%2Flayout.tsx

Logs

app-index.js:33 Warning: Extra attributes from the server: class,style
    at html
    at RootLayout (Server)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.13_r…@18.3.1/node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.13_r…18.3.1/node_modules/next/dist/client/components/redirect-boundary.js:82:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.13_r…18.3.1/node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.13_r…8.3.1/node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.13_r…e_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.13_r…/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.13_r…dist/client/components/react-dev-overlay/app/hot-reloader-client.js:321:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.13_r…react@18.3.1/node_modules/next/dist/client/components/app-router.js:207:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.13_r…ct@18.3.1/node_modules/next/dist/client/components/error-boundary.js:113:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.13_r…t@18.3.1/node_modules/next/dist/client/components/error-boundary.js:160:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.13_r…react@18.3.1/node_modules/next/dist/client/components/app-router.js:585:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.13_r…act@18.3.1__react@18.3.1/node_modules/next/dist/client/app-index.js:112:27)
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.2.13_r…act@18.3.1__react@18.3.1/node_modules/next/dist/client/app-index.js:117:11)

### System Info

tested on Google chrome, firefox, Brave browser.

### Before submitting

- [X] I've made research efforts and searched the documentation
- [X] I've searched for existing issues

[tperelle]

Hi, I was searching from where this warning was coming from. I've effectively bootstraped a new NextJS project with Shadcn and implemented the dark mode following the documentation. The warning is still present if I remove the "use client" directive.

[rirh]

i got same issues!!!