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

while hovering on the theme toggle it still shows light background with light foreground color. this is a design flaw and leads to poor accessibility of the application.
fixing this will improve the viewability of the button by more users and improve the accessibility of the application.

check the expected and current behaviors of the button below:

Reproducible demo

No response

Steps to reproduce

Step 1

set the navbar style to 'dark' in docusaurus.config.js file

navbar: {
        title: "My Site",
        style: "dark",

Step 2

while in light mode hover on the theme toggle

Expected behavior

Actual behavior

Your environment

• Docusaurus version used: latest
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chorme 89
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows

Self-service

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