Skip to content

Hydration mismatch warning on <html> class (dark theme) #42

Description

@Muawiya-contact

Summary

Seeing a hydration mismatch warning in dev. The <html> element gets class="dark" and style={{ color-scheme: "dark" }} on the client, which doesn’t match server HTML.

Expected

No hydration mismatch warnings.

Actual

Hydration warning referencing <html> className/style mismatch (dark theme).

Notes

Likely related to next-themes updating the <html> class on the client.

Environment

  • OS: Windows
  • Node: 20.x
  • Yarn: 1.22.x
  • Next.js: 15.1.0
Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions