[bug]: Dark Mode issue with next-themes "DOMTokenList.add: The token can not contain whitespace."

[RockyAiii]

Describe the bug

Not sure if it's me (probably), or where the bug lies as this could be a Nextjs/Tailwind bug. I create a new nextjs app, install shadcn and next-themes. I follow the documentation as it is for the Dark Mode Tohhle. When I start the dev server i get the following error -

Runtime InvalidCharacterError
DOMTokenList.add: The token can not contain whitespace.

components/theme-provider.tsx (10:10) @ ThemeProvider

8 | ...props
9 | }: React.ComponentProps) {

10 | return <NextThemesProvider {...props}>{children};
| ^
11 | }
12 |

Call Stack 78
Show 76 ignore-listed frame(s)
ThemeProvider
components/theme-provider.tsx (10:10)
RootLayout
app\layout.tsx (31:9)

Affected component/components

Dark Mode Toggle

How to reproduce

1 - npx create-next-app@latest .
2 - npx shadcn@latest init
3 - npm i next-themes
4 - Empty the home page of all the junk to a div with the text Landing Page
5 - rund dev server and get that DOM error about whitespace?

Codesandbox/StackBlitz link

No response

Logs

System Info

{
  "name": "sandbox4",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  },
  "dependencies": {
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "lucide-react": "^0.555.0",
    "next": "16.0.6",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-dom": "19.2.0",
    "tailwind-merge": "^3.4.0"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "16.0.6",
    "tailwindcss": "^4",
    "tw-animate-css": "^1.4.0",
    "typescript": "^5"
  }
}

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[RockyAiii]

i gues nobody else has this issue