Repository: facebook/docusaurus
File: packages/docusaurus-theme-classic/src/theme/Icon/Socials/Bluesky/index.tsx (TypeScript)

Code before:
/**
 * 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.
 */

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<SVGSVGElement>): ReactNode {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      preserveAspectRatio="xMidYMid"
      viewBox="0 0 256 226"
      style={{'--dark': '#000', '--light': '#fff'} as CSSProperties}
      {...props}
      className={clsx(props.className, styles.blueskySvg)}>
      <path d="M55.491 15.172c29.35 22.035 60.917 66.712 72.509 90.686 11.592-23.974 43.159-68.651 72.509-90.686C221.686-.727 256-13.028 256 26.116c0 7.818-4.482 65.674-7.111 75.068-9.138 32.654-42.436 40.983-72.057 35.942 51.775 8.812 64.946 38 36.501 67.187-54.021 55.433-77.644-13.908-83.696-31.676-1.11-3.257-1.63-4.78-1.637-3.485-.008-1.296-.527.228-1.637 3.485-6.052 17.768-29.675 87.11-83.696 31.676-28.445-29.187-15.274-58.375 36.5-67.187-29.62 5.041-62.918-3.288-72.056-35.942C4.482 91.79 0 33.934 0 26.116 0-13.028 34.314-.727 55.491 15.172Z" />
    </svg>
  );
}
export default Bluesky;


Review comment (suggestion):
These are the default colors used for the GitHub icon.
But here we still want the icon to be blue by default.
Otherwise you change our website from:

<img width="408" height="81" alt="CleanShot 2025-09-12 at 11 50 14" src="https://github.com/user-attachments/assets/014cf705-f444-4f45-bdb3-7237defd39e3" />

to:

<img width="818" height="170" alt="CleanShot 2025-09-12 at 11 50 34@2x" src="https://github.com/user-attachments/assets/17cc2765-ca9b-4dba-b26b-8d826555457d" />

It's fine to let you override the defaults we provide, but we probably want to keep the icon colors we choose.


Code after:
/**
 * 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.
 */

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<SVGSVGElement>): ReactNode {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      preserveAspectRatio="xMidYMid"
      viewBox="0 0 256 226"
      style={{'--dark': '#0085ff', '--light': '#0085ff'} as CSSProperties}
      {...props}
      className={clsx(props.className, styles.blueskySvg)}>
      <path d="M55.491 15.172c29.35 22.035 60.917 66.712 72.509 90.686 11.592-23.974 43.159-68.651 72.509-90.686C221.686-.727 256-13.028 256 26.116c0 7.818-4.482 65.674-7.111 75.068-9.138 32.654-42.436 40.983-72.057 35.942 51.775 8.812 64.946 38 36.501 67.187-54.021 55.433-77.644-13.908-83.696-31.676-1.11-3.257-1.63-4.78-1.637-3.485-.008-1.296-.527.228-1.637 3.485-6.052 17.768-29.675 87.11-83.696 31.676-28.445-29.187-15.274-58.375 36.5-67.187-29.62 5.041-62.918-3.288-72.056-35.942C4.482 91.79 0 33.934 0 26.116 0-13.028 34.314-.727 55.491 15.172Z" />
    </svg>
  );
}
export default Bluesky;