color mode is not working on nav bar custom component during first load

[hemarina]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

Custom button on nav bar doesn't use the right color mode on first loading. After clicking on light/dark mode button on nav bar, it shows the dark mode button.

Reproducible demo

No response

Steps to reproduce

1. Add a custom button following: Theming: use custom components as navbar/sidebar/footer items #7227
2. Check the custom button on nav bar.

Expected behavior

Show dark mode on custom image button when first loading the page.

Actual behavior

Custom button on nav bar doesn't use the right color mode when first loading the pages. I confirm that color mode is under "dark".

It shows light mode like this:

Your environment

• Public source code: N/A
• Public site URL: N/A
• Docusaurus version used: 3.5.2
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Microsoft Edge for Business Version 130.0.2849.52
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows 11

Self-service

• I'd be willing to fix this bug myself.

[slorber]

Sharing the custom button code is not optional 🤷

Most likely this is a duplicate of other well known issues related to React hydration and use of useColorMode()

Please do a search