fix the background colours for gallery

Author: marjisound

dotcom-rendering/src/components/GalleryImage.tsx

@@ -18,6 +18,7 @@ type Props = {
 const styles = css`
 	${grid.paddedContainer}
 	grid-auto-flow: row dense;
+	background-color: ${palette('--article-inner-background')};
 
 	${until.tablet} {
 		border-top: 1px solid ${palette('--article-border')};

dotcom-rendering/src/components/SubMeta.tsx

@@ -127,6 +127,11 @@ const syndicationButtonOverrides = css`
 	}
 `;
 
+const galleryStyles = css`
+	${grid.paddedContainer};
+	background-color: ${palette('--article-inner-background')};
+`;
+
 export const SubMeta = ({
 	format,
 	subMetaKeywordLinks,
@@ -160,7 +165,7 @@ export const SubMeta = ({
 					? setMetaWidth
 					: undefined,
 				format.design === ArticleDesign.Gallery
-					? grid.container
+					? galleryStyles
 					: undefined,
 			]}
 		>

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -36,6 +36,11 @@ const border = css({
 	color: '#ccc',
 });
 
+const headerStyles = css`
+	${grid.container}
+	background-color: ${palette('--article-inner-background')};
+`;
+
 export const GalleryLayout = (props: WebProps | AppProps) => {
 	const gallery = props.gallery;
 	const frontendData = gallery.frontendData;
@@ -68,11 +73,11 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 			)}
 			<main
 				css={{
-					backgroundColor: palette('--article-inner-background'),
+					backgroundColor: palette('--article-background'),
 				}}
 			>
 				<div css={border}>Labs header</div>
-				<header css={[grid.container]}>
+				<header css={headerStyles}>
 					<MainMediaGallery
 						mainMedia={gallery.mainMedia}
 						format={format}

dotcom-rendering/src/paletteDeclarations.ts

@@ -2989,7 +2989,7 @@ const articleBackgroundLight: PaletteFunction = ({
 		case ArticleDesign.FullPageInteractive:
 			return 'transparent';
 		case ArticleDesign.Gallery:
-			return transparentColour(sourcePalette.neutral[0], 0.25);
+			return '#0d0d0d';
 		default:
 			switch (theme) {
 				case ArticleSpecial.SpecialReport:
@@ -3034,7 +3034,7 @@ const articleBackgroundDark: PaletteFunction = ({ design, theme }) => {
 					return sourcePalette.neutral[10];
 			}
 		case ArticleDesign.Gallery:
-			return transparentColour(sourcePalette.neutral[0], 0.25);
+			return '#131313';
 		default:
 			return sourcePalette.neutral[10];
 	}