docusaurus/packages/docusaurus-theme-common/src/components/ThemedComponent/index.tsx

/**
 * 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 React from 'react';
import clsx from 'clsx';
import useIsBrowser from '@docusaurus/useIsBrowser';
import {useColorMode} from '../../contexts/colorMode';

import styles from './styles.module.css';

const AllThemes = ['light', 'dark'] as const;

type Theme = (typeof AllThemes)[number];

type RenderFn = ({
  theme,
  className,
}: {
  theme: Theme;
  className: string;
}) => React.ReactNode;

type Props = {
  children: RenderFn;
  className?: string;
};

/**
 * Generic component to render anything themed in light/dark
 * Note: it's preferable to use CSS for theming because this component
 * will need to render all the variants during SSR to avoid a theme flash.
 *
 * Use this only when CSS customizations are not convenient or impossible.
 * For example, rendering themed images or SVGs...
 *
 * @param className applied to all the variants
 * @param children function to render a theme variant
 * @constructor
 */
export default function ThemedComponent({
  className,
  children,
}: Props): JSX.Element {
  const isBrowser = useIsBrowser();
  const {colorMode} = useColorMode();

  function getThemesToRender(): Theme[] {
    if (isBrowser) {
      return colorMode === 'dark' ? ['dark'] : ['light'];
    }
    // We need to render both components on the server / hydration to avoid:
    // - a flash of wrong theme before hydration
    // - React hydration mismatches
    // See https://github.com/facebook/docusaurus/pull/3730
    return ['light', 'dark'];
  }

  return (
    <>
      {getThemesToRender().map((theme) => {
        const themedElement = children({
          theme,
          className: clsx(
            className,
            styles.themedComponent,
            styles[`themedComponent--${theme}`],
          ),
        });
        return <React.Fragment key={theme}>{themedElement}</React.Fragment>;
      })}
    </>
  );
}