function decideArticleLogo()

in dotcom-rendering/src/components/Branding.importable.tsx [127:190]
55 lines of code
10 McCabe index (conditional complexity)

function decideArticleLogo(
	branding: BrandingType,
	format: ArticleFormat,
	darkModeAvailable: boolean,
) {
	/** logoForDarkBackground is not required on branding,
	 *  so fallback to standard logo if not present */
	const maybeDarkLogo = branding.logoForDarkBackground ?? branding.logo;

	const useDarkColourScheme =
		(format.design === ArticleDesign.Video ||
			format.design === ArticleDesign.Audio ||
			format.design === ArticleDesign.Gallery ||
			format.design === ArticleDesign.Picture) &&
		format.theme !== ArticleSpecial.Labs;

	return (
		<picture>
			{/**
			 * For LiveBlogs, the background colour of the 'meta' section is light
			 * from desktop but dark below desktop. If the logo has a version designed for
			 * dark backgrounds, it should be shown on breakpoints below desktop.
			 */}
			{format.design === ArticleDesign.LiveBlog && (
				<source
					width={maybeDarkLogo.dimensions.width}
					height={maybeDarkLogo.dimensions.height}
					srcSet={encodeURI(maybeDarkLogo.src)}
					media={`(max-width: ${breakpoints.desktop - 1}px)`}
				/>
			)}
			{/** High contrast logo if dark mode available & dark mode logo exists for branding */}
			{darkModeAvailable && branding.logoForDarkBackground && (
				<source
					width={branding.logoForDarkBackground.dimensions.width}
					height={branding.logoForDarkBackground.dimensions.height}
					srcSet={encodeURI(branding.logoForDarkBackground.src)}
					media={'(prefers-color-scheme: dark)'}
				/>
			)}
			{/**
			 * Audio/Video articles have a dark background and need a logo designed for dark backgrounds,
			 * for everything else default to standard logo for light backgrounds
			 **/}
			{useDarkColourScheme && branding.logoForDarkBackground ? (
				<img
					width={branding.logoForDarkBackground.dimensions.width}
					height={branding.logoForDarkBackground.dimensions.height}
					src={encodeURI(branding.logoForDarkBackground.src)}
					alt={branding.sponsorName}
					css={imgStyles(branding.logo.dimensions.width)}
				/>
			) : (
				<img
					width={branding.logo.dimensions.width}
					height={branding.logo.dimensions.height}
					src={encodeURI(branding.logo.src)}
					alt={branding.sponsorName}
					css={imgStyles(branding.logo.dimensions.width)}
				/>
			)}
		</picture>
	);
}