OpenCut-app / OpenCut-app/OpenCut

[BUG] Hydration error when switching between Dark/Light theme

Open
#610 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
89.8k
Forks
8.9k
PR merge metrics
No merged PRs in 30d

Description

Platform

Window 11

Browser

Brave

Current Behavior

When switching between Dark and Light themes, the application throws a hydration error.
The server renders "Dark" by default, but the client re-renders as "Light", causing a mismatch.
This results in a console warning:

"Hydration failed because the server rendered text didn't match the client."

Expected Behavior

The theme toggle should render consistently across server and client.
Switching themes should not cause hydration errors, and the text should match between server and client ("Dark" or "Light").

Recurrence Probability

Always

Steps To Reproduce
  1. Run the application in development mode.
  2. Open the app in Brave browser (Windows 11).
  3. Toggle between Dark and Light themes.
  4. Open the console and observe the hydration error.
Anything else?

No response

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the application in development mode and reproducing the theme switch in Brave, then locate the theme toggle and its server/client rendering path. Done means switching between Dark and Light produces matching text on both sides with no hydration error in the console.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.