fix(theme): improve color toggle when using dark navbar (#8615)

Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>

packages/docusaurus-theme-classic/src/theme-classic.d.ts

@@ -1243,6 +1243,7 @@ declare module '@theme/ColorModeToggle' {
 
   export interface Props {
     readonly className?: string;
+    readonly buttonClassName?: string;
     readonly value: ColorMode;
     /**
      * The parameter represents the "to-be" value. For example, if currently in

packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx

@@ -15,7 +15,12 @@ import type {Props} from '@theme/ColorModeToggle';
 
 import styles from './styles.module.css';
 
-function ColorModeToggle({className, value, onChange}: Props): JSX.Element {
+function ColorModeToggle({
+  className,
+  buttonClassName,
+  value,
+  onChange,
+}: Props): JSX.Element {
   const isBrowser = useIsBrowser();
 
   const title = translate(
@@ -47,6 +52,7 @@ function ColorModeToggle({className, value, onChange}: Props): JSX.Element {
           'clean-btn',
           styles.toggleButton,
           !isBrowser && styles.toggleButtonDisabled,
+          buttonClassName,
         )}
         type="button"
         onClick={() => onChange(value === 'dark' ? 'light' : 'dark')}

packages/docusaurus-theme-classic/src/theme/Navbar/ColorModeToggle/index.tsx

@@ -9,10 +9,12 @@ import React from 'react';
 import {useColorMode, useThemeConfig} from '@docusaurus/theme-common';
 import ColorModeToggle from '@theme/ColorModeToggle';
 import type {Props} from '@theme/Navbar/ColorModeToggle';
+import styles from './styles.module.css';
 
 export default function NavbarColorModeToggle({
   className,
 }: Props): JSX.Element | null {
+  const navbarStyle = useThemeConfig().navbar.style;
   const disabled = useThemeConfig().colorMode.disableSwitch;
   const {colorMode, setColorMode} = useColorMode();
 
@@ -23,6 +25,9 @@ export default function NavbarColorModeToggle({
   return (
     <ColorModeToggle
       className={className}
+      buttonClassName={
+        navbarStyle === 'dark' ? styles.darkNavbarColorModeToggle : undefined
+      }
       value={colorMode}
       onChange={setColorMode}
     />

packages/docusaurus-theme-classic/src/theme/Navbar/ColorModeToggle/styles.module.css

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.darkNavbarColorModeToggle:hover {
+  background: var(--ifm-color-gray-800);
+}