@docusaurus/theme-classic 0.0.0-5493 → 0.0.0-5494

package/lib/theme/ColorModeToggle/index.d.ts

@@ -6,6 +6,6 @@
  */
 import React from 'react';
 import type { Props } from '@theme/ColorModeToggle';
-declare function ColorModeToggle({ className, value, onChange }: Props): JSX.Element;
+declare function ColorModeToggle({ className, buttonClassName, value, onChange, }: Props): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof ColorModeToggle>;
 export default _default;

package/lib/theme/ColorModeToggle/index.js

@@ -11,7 +11,7 @@ import {translate} from '@docusaurus/Translate';
 import IconLightMode from '@theme/Icon/LightMode';
 import IconDarkMode from '@theme/Icon/DarkMode';
 import styles from './styles.module.css';
-function ColorModeToggle({className, value, onChange}) {
+function ColorModeToggle({className, buttonClassName, value, onChange}) {
   const isBrowser = useIsBrowser();
   const title = translate(
     {
@@ -41,6 +41,7 @@ function ColorModeToggle({className, value, onChange}) {
           'clean-btn',
           styles.toggleButton,
           !isBrowser && styles.toggleButtonDisabled,
+          buttonClassName,
         )}
         type="button"
         onClick={() => onChange(value === 'dark' ? 'light' : 'dark')}

package/lib/theme/Navbar/ColorModeToggle/index.js

@@ -7,7 +7,9 @@
 import React from 'react';
 import {useColorMode, useThemeConfig} from '@docusaurus/theme-common';
 import ColorModeToggle from '@theme/ColorModeToggle';
+import styles from './styles.module.css';
 export default function NavbarColorModeToggle({className}) {
+  const navbarStyle = useThemeConfig().navbar.style;
   const disabled = useThemeConfig().colorMode.disableSwitch;
   const {colorMode, setColorMode} = useColorMode();
   if (disabled) {
@@ -16,6 +18,9 @@ export default function NavbarColorModeToggle({className}) {
   return (
     <ColorModeToggle
       className={className}
+      buttonClassName={
+        navbarStyle === 'dark' ? styles.darkNavbarColorModeToggle : undefined
+      }
       value={colorMode}
       onChange={setColorMode}
     />

package/lib/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);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-5493",
+  "version": "0.0.0-5494",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -20,18 +20,18 @@
     "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-5493",
-    "@docusaurus/mdx-loader": "0.0.0-5493",
-    "@docusaurus/module-type-aliases": "0.0.0-5493",
-    "@docusaurus/plugin-content-blog": "0.0.0-5493",
-    "@docusaurus/plugin-content-docs": "0.0.0-5493",
-    "@docusaurus/plugin-content-pages": "0.0.0-5493",
-    "@docusaurus/theme-common": "0.0.0-5493",
-    "@docusaurus/theme-translations": "0.0.0-5493",
-    "@docusaurus/types": "0.0.0-5493",
-    "@docusaurus/utils": "0.0.0-5493",
-    "@docusaurus/utils-common": "0.0.0-5493",
-    "@docusaurus/utils-validation": "0.0.0-5493",
+    "@docusaurus/core": "0.0.0-5494",
+    "@docusaurus/mdx-loader": "0.0.0-5494",
+    "@docusaurus/module-type-aliases": "0.0.0-5494",
+    "@docusaurus/plugin-content-blog": "0.0.0-5494",
+    "@docusaurus/plugin-content-docs": "0.0.0-5494",
+    "@docusaurus/plugin-content-pages": "0.0.0-5494",
+    "@docusaurus/theme-common": "0.0.0-5494",
+    "@docusaurus/theme-translations": "0.0.0-5494",
+    "@docusaurus/types": "0.0.0-5494",
+    "@docusaurus/utils": "0.0.0-5494",
+    "@docusaurus/utils-common": "0.0.0-5494",
+    "@docusaurus/utils-validation": "0.0.0-5494",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
     "copy-text-to-clipboard": "^3.0.1",
@@ -62,5 +62,5 @@
   "engines": {
     "node": ">=16.14"
   },
-  "gitHead": "57a8ffbdb5d78f6a790b2d84f3d6df652484f3c8"
+  "gitHead": "9b9f5f1d54df064dc515aee91dfc1af0e843df60"
 }

package/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')}

package/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}
     />

package/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);
+}

package/src/theme-classic.d.ts

@@ -1352,6 +1352,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