Dark Mode tutorial causes error in current version of Next.js: "DOMException: Failed to execute 'add' on 'DOMTokenList':"

[AnthonySchneider2000]

I created a new Next.js project today following the shadcn docs' installation instructions, and then attempted to add a dark theme toggle by following the shadcn docs' dark mode instructions. After adding ThemeProvider to my layout, my browser displayed the following error:

"DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('{"breakpoints":{"keys":["xs","sm","md","lg","xl"],"val...
... contains HTML space characters, which are not valid in tokens.
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/next-themes/dist/index.module.js:8:1169)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/next-themes/dist/index.module.js:8:1922)
    at commitHookEffectListMount (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20004:23)
    at commitHookPassiveMountEffects (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:22057:7)
..."

Specifically, adding attribute="class" to the ThemeProvider is what causes the issue, although simply removing this prop does not seem to be a solution.

[xossiane]

Hey! I just spent the whole week trying to build a project using Next13 and next-themes and it doesn't seem to work in anyway :/ Couldn't find a solution, so I would be glad if anyone could help

[AnthonySchneider2000]

Hey! I just spent the whole week trying to build a project using Next13 and next-themes and it doesn't seem to work in anyway :/ Couldn't find a solution, so I would be glad if anyone could help

If you're just want to implement a dark/light mode, the following works:

  const toggleDarkMode = () => {
    document.documentElement.classList.toggle('dark')
  }

To make it dark theme by default, you add the "dark" class to the html tag in your layout.

[servesh-chaturvedi]

@xossiane @AnthonySchneider2000 have you checked this

[AnthonySchneider2000]

@xossiane @AnthonySchneider2000 have you checked this

I hadn't seen that. I've cloned it and next-themes seems to work correctly even after migrating the project to Next.js 14. However, I will not close the issue as the shadcn docs for using next-themes still cause this issue.

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.