From e8d971d2d67eabc6669c37c538542c0d013bdbc8 Mon Sep 17 00:00:00 2001 From: Dewansh Thakur <71703033+dewanshDT@users.noreply.github.com> Date: Thu, 23 Feb 2023 23:54:03 +0530 Subject: [PATCH] fix(theme): improve color toggle when using dark navbar (#8615) Co-authored-by: sebastienlorber --- .../docusaurus-theme-classic/src/theme-classic.d.ts | 1 + .../src/theme/ColorModeToggle/index.tsx | 8 +++++++- .../src/theme/Navbar/ColorModeToggle/index.tsx | 5 +++++ .../src/theme/Navbar/ColorModeToggle/styles.module.css | 10 ++++++++++ 4 files changed, 23 insertions(+), 1 deletion(-) create mode 100644 packages/docusaurus-theme-classic/src/theme/Navbar/ColorModeToggle/styles.module.css diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts index eac330fc4e6d..8a6cf84de944 100644 --- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts +++ b/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 diff --git a/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx b/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx index fe939a9d9a1d..e2d0c297f63c 100644 --- a/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx +++ b/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')} diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/ColorModeToggle/index.tsx b/packages/docusaurus-theme-classic/src/theme/Navbar/ColorModeToggle/index.tsx index d1fc9c3ffba1..8e313b3a1960 100644 --- a/packages/docusaurus-theme-classic/src/theme/Navbar/ColorModeToggle/index.tsx +++ b/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 ( diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/ColorModeToggle/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Navbar/ColorModeToggle/styles.module.css new file mode 100644 index 000000000000..21813e879180 --- /dev/null +++ b/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); +}