Theme toggle :hover contrast issue while navbar style: 'dark'

[dewanshDT]

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.

[Josh-Cena]

Can't reproduce this on https://docusaurus.io/ using Windows 7 and Chrome 89. Can you see the same behavior on our site, or does it only happen with your site?

while navbar style: 'dark'

Oh I see. Thanks for reporting!

[dewanshDT]

hey can I work on this?

[slorber]

Yes, you don't need to ask for such issues, first good PR will be merged @dewanshDT

[dewanshDT]

hey @slorber @Josh-Cena I've fixed this problem and created a PR 😁