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

Hi,

Just notice a problem in my local / staging env, and tried on the official Docusaurus page (url : https://docusaurus.io/) to be sure that it was not a pb on my end.

As you can see on the video below, pb is there's glitches when navigating in navbar when using non default theme (dark or light) : when letting default theme to light mode, when you select dark mode you can see glitches in navbar when clicking on links. If you set default to dark mode, you will experience the same when using light mode.

The video was taken from the official page so you can do the test very easily : i assume default theme mode was not set or set to light cause you've got glitch in dark mode (or system mode when system is dark too) !

Thanks for your help !

Reproducible demo

No response

Steps to reproduce

1. Go to Docusaurus official page : https://docusaurus.io/
2. Set dark mode if it's not your system default
3. Click on links in navbar -> see glitches
4. Set light mode
5. Click on links in navbar -> no glitches

Expected behavior

No glitches at all, default theme mode selected or not.

Actual behavior

Your environment

• Public source code:
• Public site URL:
• Docusaurus version used:
• Environment name and version (e.g. Chrome 89, Node.js 16.4):
• Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

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