Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(theme): improve color toggle when using dark navbar (#8615)
Browse files Browse the repository at this point in the history
Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>
dewanshDT and slorber committed Mar 23, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent a12c6f8 commit e8d971d
Showing 4 changed files with 23 additions and 1 deletion.
1 change: 1 addition & 0 deletions packages/docusaurus-theme-classic/src/theme-classic.d.ts
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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')}
Original file line number Diff line number Diff line change
@@ -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}
/>
Original file line number Diff line number Diff line change
@@ -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);
}

0 comments on commit e8d971d

Please sign in to comment.