diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Bluesky/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Bluesky/index.tsx index 0f0c400bb4..141bb4ed33 100644 --- a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Bluesky/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Bluesky/index.tsx @@ -5,7 +5,9 @@ * LICENSE file in the root directory of this source tree. */ -import type {SVGProps, ReactNode} from 'react'; +import type {SVGProps, ReactNode, CSSProperties} from 'react'; +import clsx from 'clsx'; +import styles from './styles.module.css'; // SVG Source: https://svgl.app/ function Bluesky(props: SVGProps): ReactNode { @@ -16,11 +18,10 @@ function Bluesky(props: SVGProps): ReactNode { height="1em" preserveAspectRatio="xMidYMid" viewBox="0 0 256 226" - {...props}> - + style={{'--dark': '#0085ff', '--light': '#0085ff'} as CSSProperties} + {...props} + className={clsx(props.className, styles.blueskySvg)}> + ); } diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Bluesky/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Bluesky/styles.module.css new file mode 100644 index 0000000000..b7ad757675 --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/Bluesky/styles.module.css @@ -0,0 +1,14 @@ +/** + * 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. + */ + +[data-theme='dark'] .blueskySvg { + fill: var(--light); +} + +[data-theme='light'] .blueskySvg { + fill: var(--dark); +} diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx index 1970a5bcd1..ad339a2e98 100644 --- a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/index.tsx @@ -5,7 +5,9 @@ * LICENSE file in the root directory of this source tree. */ -import type {ReactNode, SVGProps} from 'react'; +import type {SVGProps, ReactNode, CSSProperties} from 'react'; +import clsx from 'clsx'; +import styles from './styles.module.css'; // SVG Source: https://svgl.app/ function LinkedIn(props: SVGProps): ReactNode { @@ -16,11 +18,10 @@ function LinkedIn(props: SVGProps): ReactNode { height="1em" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" - {...props}> - + style={{'--dark': '#0a66c2', '--light': '#ffffffe6'} as CSSProperties} + {...props} + className={clsx(props.className, styles.linkedinSvg)}> + ); } diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/styles.module.css new file mode 100644 index 0000000000..dc1d40dc1e --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/Icon/Socials/LinkedIn/styles.module.css @@ -0,0 +1,14 @@ +/** + * 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. + */ + +[data-theme='dark'] .linkedinSvg { + fill: var(--light); +} + +[data-theme='light'] .linkedinSvg { + fill: var(--dark); +}