diff --git a/dotcom-rendering/src/components/Discussion/Badges.tsx b/dotcom-rendering/src/components/Discussion/Badges.tsx
index 28baf814e9b..63a5016b913 100644
--- a/dotcom-rendering/src/components/Discussion/Badges.tsx
+++ b/dotcom-rendering/src/components/Discussion/Badges.tsx
@@ -33,7 +33,7 @@ const staffLabel = css`
 	color: ${themePalette('--staff-label-color')};
 `;
 const guardianPickLabel = css`
-	color: ${sourcePalette.neutral[7]};
+	color: ${themePalette('--pick-label-color')};
 `;
 
 export const GuardianStaff = () => (
diff --git a/dotcom-rendering/src/components/Discussion/Comment.stories.tsx b/dotcom-rendering/src/components/Discussion/Comment.stories.tsx
index 8d5b1d33d88..1f8df6e2e8f 100644
--- a/dotcom-rendering/src/components/Discussion/Comment.stories.tsx
+++ b/dotcom-rendering/src/components/Discussion/Comment.stories.tsx
@@ -1,4 +1,5 @@
 import { ArticleDesign, ArticleDisplay, Pillar } from '@guardian/libs';
+import { splitTheme } from '../../../.storybook/decorators/splitThemeDecorator';
 import type { CommentType, SignedInUser } from '../../types/discussion';
 import { Comment } from './Comment';
 
@@ -139,7 +140,7 @@ const staffUser: SignedInUser = {
 	authStatus: { kind: 'SignedInWithCookies' },
 };
 
-const format = {
+const defaultFormat = {
 	design: ArticleDesign.Standard,
 	display: ArticleDisplay.Standard,
 	theme: Pillar.News,
@@ -148,7 +149,6 @@ const format = {
 export const Root = () => (
 	<Comment
 		comment={commentData}
-		format={format}
 		isClosedForComments={false}
 		setCommentBeingRepliedTo={() => {}}
 		isReply={false}
@@ -164,14 +164,11 @@ Root.story = {
 		chromatic: { viewports: [1300] },
 	},
 };
+Root.decorators = [splitTheme([defaultFormat], { orientation: 'vertical' })];
 
 export const RootMobile = () => (
 	<Comment
 		comment={commentData}
-		format={{
-			...format,
-			theme: Pillar.Sport,
-		}}
 		setCommentBeingRepliedTo={() => {}}
 		isReply={false}
 		isClosedForComments={false}
@@ -187,14 +184,21 @@ RootMobile.story = {
 		chromatic: { viewports: [375] },
 	},
 };
+RootMobile.decorators = [
+	splitTheme(
+		[
+			{
+				...defaultFormat,
+				theme: Pillar.Sport,
+			},
+		],
+		{ orientation: 'vertical' },
+	),
+];
 
 export const ReplyComment = () => (
 	<Comment
 		comment={replyCommentData}
-		format={{
-			...format,
-			theme: Pillar.Lifestyle,
-		}}
 		isClosedForComments={false}
 		setCommentBeingRepliedTo={() => {}}
 		isReply={true}
@@ -210,14 +214,21 @@ ReplyComment.story = {
 		chromatic: { viewports: [1300] },
 	},
 };
+ReplyComment.decorators = [
+	splitTheme(
+		[
+			{
+				...defaultFormat,
+				theme: Pillar.Lifestyle,
+			},
+		],
+		{ orientation: 'vertical' },
+	),
+];
 
 export const MobileReply = () => (
 	<Comment
 		comment={replyCommentData}
-		format={{
-			...format,
-			theme: Pillar.Culture,
-		}}
 		setCommentBeingRepliedTo={() => {}}
 		isReply={true}
 		isClosedForComments={false}
@@ -233,14 +244,21 @@ MobileReply.story = {
 		chromatic: { viewports: [375] },
 	},
 };
+MobileReply.decorators = [
+	splitTheme(
+		[
+			{
+				...defaultFormat,
+				theme: Pillar.Culture,
+			},
+		],
+		{ orientation: 'vertical' },
+	),
+];
 
 export const LongMobileReply = () => (
 	<Comment
 		comment={longReplyCommentData}
-		format={{
-			...format,
-			theme: Pillar.Culture,
-		}}
 		setCommentBeingRepliedTo={() => {}}
 		isReply={true}
 		isClosedForComments={false}
@@ -256,14 +274,21 @@ LongMobileReply.story = {
 		chromatic: { viewports: [375] },
 	},
 };
+LongMobileReply.decorators = [
+	splitTheme(
+		[
+			{
+				...defaultFormat,
+				theme: Pillar.Culture,
+			},
+		],
+		{ orientation: 'vertical' },
+	),
+];
 
 export const LongBothMobileReply = () => (
 	<Comment
 		comment={longBothReplyCommentData}
-		format={{
-			...format,
-			theme: Pillar.Culture,
-		}}
 		setCommentBeingRepliedTo={() => {}}
 		isReply={true}
 		isClosedForComments={false}
@@ -279,6 +304,17 @@ LongBothMobileReply.story = {
 		chromatic: { viewports: [375] },
 	},
 };
+LongBothMobileReply.decorators = [
+	splitTheme(
+		[
+			{
+				...defaultFormat,
+				theme: Pillar.Culture,
+			},
+		],
+		{ orientation: 'vertical' },
+	),
+];
 
 export const PickedComment = () => (
 	<Comment
@@ -286,7 +322,6 @@ export const PickedComment = () => (
 			...commentData,
 			isHighlighted: true,
 		}}
-		format={format}
 		isClosedForComments={false}
 		setCommentBeingRepliedTo={() => {}}
 		isReply={false}
@@ -296,14 +331,21 @@ export const PickedComment = () => (
 	/>
 );
 PickedComment.storyName = 'Picked Comment';
+PickedComment.decorators = [
+	splitTheme(
+		[
+			{
+				...defaultFormat,
+				theme: Pillar.Culture,
+			},
+		],
+		{ orientation: 'vertical' },
+	),
+];
 
 export const StaffUserComment = () => (
 	<Comment
 		comment={commentStaffData}
-		format={{
-			...format,
-			theme: Pillar.Opinion,
-		}}
 		isClosedForComments={false}
 		setCommentBeingRepliedTo={() => {}}
 		isReply={false}
@@ -313,14 +355,21 @@ export const StaffUserComment = () => (
 	/>
 );
 StaffUserComment.storyName = 'Staff User Comment';
+StaffUserComment.decorators = [
+	splitTheme(
+		[
+			{
+				...defaultFormat,
+				theme: Pillar.Opinion,
+			},
+		],
+		{ orientation: 'vertical' },
+	),
+];
 
 export const ContributorUserComment = () => (
 	<Comment
 		comment={commentContributorData}
-		format={{
-			...format,
-			theme: Pillar.Opinion,
-		}}
 		isClosedForComments={false}
 		setCommentBeingRepliedTo={() => {}}
 		isReply={false}
@@ -330,6 +379,17 @@ export const ContributorUserComment = () => (
 	/>
 );
 ContributorUserComment.storyName = 'Contributor User Comment';
+ContributorUserComment.decorators = [
+	splitTheme(
+		[
+			{
+				...defaultFormat,
+				theme: Pillar.Opinion,
+			},
+		],
+		{ orientation: 'vertical' },
+	),
+];
 
 export const PickedStaffUserComment = () => (
 	<Comment
@@ -337,7 +397,6 @@ export const PickedStaffUserComment = () => (
 			...commentStaffData,
 			isHighlighted: true,
 		}}
-		format={format}
 		isClosedForComments={false}
 		setCommentBeingRepliedTo={() => {}}
 		isReply={false}
@@ -353,6 +412,9 @@ PickedStaffUserComment.story = {
 		chromatic: { viewports: [1300] },
 	},
 };
+PickedStaffUserComment.decorators = [
+	splitTheme([defaultFormat], { orientation: 'vertical' }),
+];
 
 export const PickedStaffUserCommentMobile = () => (
 	<Comment
@@ -360,10 +422,6 @@ export const PickedStaffUserCommentMobile = () => (
 			...commentStaffData,
 			isHighlighted: true,
 		}}
-		format={{
-			...format,
-			theme: Pillar.Sport,
-		}}
 		isClosedForComments={false}
 		setCommentBeingRepliedTo={() => {}}
 		isReply={false}
@@ -380,6 +438,17 @@ PickedStaffUserCommentMobile.story = {
 		chromatic: { viewports: [375] },
 	},
 };
+PickedStaffUserCommentMobile.decorators = [
+	splitTheme(
+		[
+			{
+				...defaultFormat,
+				theme: Pillar.Sport,
+			},
+		],
+		{ orientation: 'vertical' },
+	),
+];
 
 export const ContributorUserCommentDesktop = () => (
 	<Comment
@@ -387,7 +456,6 @@ export const ContributorUserCommentDesktop = () => (
 			...commentContributorData,
 			isHighlighted: true,
 		}}
-		format={format}
 		isClosedForComments={false}
 		setCommentBeingRepliedTo={() => {}}
 		isReply={false}
@@ -404,6 +472,9 @@ ContributorUserCommentDesktop.story = {
 		chromatic: { viewports: [1300] },
 	},
 };
+ContributorUserCommentDesktop.decorators = [
+	splitTheme([defaultFormat], { orientation: 'vertical' }),
+];
 
 export const ContributorUserCommentMobile = () => (
 	<Comment
@@ -411,10 +482,6 @@ export const ContributorUserCommentMobile = () => (
 			...commentContributorData,
 			isHighlighted: true,
 		}}
-		format={{
-			...format,
-			theme: Pillar.Sport,
-		}}
 		isClosedForComments={false}
 		setCommentBeingRepliedTo={() => {}}
 		isReply={false}
@@ -431,14 +498,21 @@ ContributorUserCommentMobile.story = {
 		chromatic: { viewports: [375] },
 	},
 };
+ContributorUserCommentMobile.decorators = [
+	splitTheme(
+		[
+			{
+				...defaultFormat,
+				theme: Pillar.Sport,
+			},
+		],
+		{ orientation: 'vertical' },
+	),
+];
 
 export const LoggedInAsModerator = () => (
 	<Comment
 		comment={commentData}
-		format={{
-			...format,
-			theme: Pillar.Lifestyle,
-		}}
 		isClosedForComments={false}
 		setCommentBeingRepliedTo={() => {}}
 		user={staffUser}
@@ -449,14 +523,21 @@ export const LoggedInAsModerator = () => (
 	/>
 );
 LoggedInAsModerator.storyName = 'Logged in as moderator';
+LoggedInAsModerator.decorators = [
+	splitTheme(
+		[
+			{
+				...defaultFormat,
+				theme: Pillar.Lifestyle,
+			},
+		],
+		{ orientation: 'vertical' },
+	),
+];
 
 export const LoggedInAsUser = () => (
 	<Comment
 		comment={commentData}
-		format={{
-			...format,
-			theme: Pillar.Lifestyle,
-		}}
 		isClosedForComments={false}
 		setCommentBeingRepliedTo={() => {}}
 		user={user}
@@ -467,14 +548,21 @@ export const LoggedInAsUser = () => (
 	/>
 );
 LoggedInAsUser.storyName = 'Logged in as normal user';
+LoggedInAsUser.decorators = [
+	splitTheme(
+		[
+			{
+				...defaultFormat,
+				theme: Pillar.Lifestyle,
+			},
+		],
+		{ orientation: 'vertical' },
+	),
+];
 
 export const BlockedComment = () => (
 	<Comment
 		comment={blockedCommentData}
-		format={{
-			...format,
-			theme: Pillar.Culture,
-		}}
 		isClosedForComments={false}
 		setCommentBeingRepliedTo={() => {}}
 		isReply={false}
@@ -484,14 +572,21 @@ export const BlockedComment = () => (
 	/>
 );
 BlockedComment.storyName = 'Blocked comment';
+BlockedComment.decorators = [
+	splitTheme(
+		[
+			{
+				...defaultFormat,
+				theme: Pillar.Culture,
+			},
+		],
+		{ orientation: 'vertical' },
+	),
+];
 
 export const MutedComment = () => (
 	<Comment
 		comment={blockedCommentData}
-		format={{
-			...format,
-			theme: Pillar.Sport,
-		}}
 		isClosedForComments={false}
 		setCommentBeingRepliedTo={() => {}}
 		isReply={false}
@@ -501,11 +596,21 @@ export const MutedComment = () => (
 	/>
 );
 MutedComment.storyName = 'Muted comment';
+MutedComment.decorators = [
+	splitTheme(
+		[
+			{
+				...defaultFormat,
+				theme: Pillar.Sport,
+			},
+		],
+		{ orientation: 'vertical' },
+	),
+];
 
 export const ClosedForComments = () => (
 	<Comment
 		comment={commentData}
-		format={format}
 		isClosedForComments={true}
 		setCommentBeingRepliedTo={() => {}}
 		isReply={false}
@@ -521,3 +626,6 @@ ClosedForComments.story = {
 		chromatic: { viewports: [1300] },
 	},
 };
+ClosedForComments.decorators = [
+	splitTheme([defaultFormat], { orientation: 'vertical' }),
+];
diff --git a/dotcom-rendering/src/components/Discussion/Comment.tsx b/dotcom-rendering/src/components/Discussion/Comment.tsx
index df3401b3a2c..3e4f6446657 100644
--- a/dotcom-rendering/src/components/Discussion/Comment.tsx
+++ b/dotcom-rendering/src/components/Discussion/Comment.tsx
@@ -9,9 +9,9 @@ import {
 } from '@guardian/source-foundations';
 import { Button, Link, SvgIndent } from '@guardian/source-react-components';
 import { useState } from 'react';
-import { decidePalette } from '../../lib/decidePalette';
 import { pickComment, unPickComment } from '../../lib/discussionApi';
 import { createAuthenticationEventParams } from '../../lib/identity-component-event';
+import { palette as schemedPalette } from '../../palette';
 import type { CommentType, SignedInUser } from '../../types/discussion';
 import { AbuseReportForm } from './AbuseReportForm';
 import { Avatar } from './Avatar';
@@ -24,7 +24,6 @@ import { Timestamp } from './Timestamp';
 type Props = {
 	user?: SignedInUser;
 	comment: CommentType;
-	format: ArticleFormat;
 	isClosedForComments: boolean;
 	setCommentBeingRepliedTo: (commentBeingRepliedTo?: CommentType) => void;
 	isReply: boolean;
@@ -35,13 +34,13 @@ type Props = {
 	onRecommend?: (commentId: number) => Promise<boolean>;
 };
 
-const commentControlsLink = (format: ArticleFormat) => css`
+const commentControlsLink = css`
 	margin-top: -2px;
 
 	a {
 		${textSans.small({ fontWeight: 'bold' })}
 		margin-right: ${space[2]}px;
-		color: ${decidePalette(format).discussionGeneric};
+		color: ${schemedPalette('--discussion-colour')};
 		/*
       We do not want underline to be applied to SVG
       therefore we override the styles and apply them to the nested <span>
@@ -50,10 +49,9 @@ const commentControlsLink = (format: ArticleFormat) => css`
 			text-decoration: none;
 			text-decoration-color: none;
 			span {
-				color: ${decidePalette(format).discussionGeneric};
+				color: ${schemedPalette('--discussion-colour')};
 				text-decoration: underline;
-				text-decoration-color: ${decidePalette(format)
-					.discussionGeneric};
+				text-decoration-color: ${schemedPalette('--discussion-colour')};
 			}
 		}
 	}
@@ -109,7 +107,7 @@ const blockedCommentStyles = css`
 // to override a tag styles from dangerouslySetInnerHTML
 const commentLinkStyling = css`
 	a {
-		color: ${sourcePalette.brand[500]};
+		color: ${schemedPalette('--discussion-link')};
 		text-decoration: none;
 		:hover {
 			text-decoration: underline;
@@ -139,13 +137,13 @@ const avatarMargin = css`
 	}
 `;
 
-const colourStyles = (format: ArticleFormat) => css`
+const colourStyles = css`
 	a {
-		color: ${decidePalette(format).discussionGeneric};
-		text-decoration-color: ${decidePalette(format).discussionGeneric};
+		color: ${schemedPalette('--discussion-colour')};
+		text-decoration-color: ${schemedPalette('--discussion-colour')};
 		:hover {
-			color: ${decidePalette(format).discussionGeneric};
-			text-decoration-color: ${decidePalette(format).discussionGeneric};
+			color: ${schemedPalette('--discussion-colour')};
+			text-decoration-color: ${schemedPalette('--discussion-colour')};
 		}
 	}
 `;
@@ -225,9 +223,9 @@ const cssReplyToWrapper = css`
 	}
 `;
 
-const buttonLinkPillarBaseStyles = (format: ArticleFormat) => css`
+const buttonLinkPillarBaseStyles = css`
 	button {
-		color: ${decidePalette(format).discussionGeneric};
+		color: ${schemedPalette('--discussion-colour')};
 		background-color: transparent;
 		height: 18px;
 		min-height: 18px;
@@ -236,7 +234,7 @@ const buttonLinkPillarBaseStyles = (format: ArticleFormat) => css`
 
 		:hover {
 			text-decoration: underline;
-			text-decoration-color: ${decidePalette(format).discussionGeneric};
+			text-decoration-color: ${schemedPalette('--discussion-colour')};
 		}
 	}
 `;
@@ -294,7 +292,6 @@ const Space = ({ amount }: { amount: 1 | 2 | 3 | 4 | 5 | 6 | 9 | 12 | 24 }) => (
 
 export const Comment = ({
 	comment,
-	format,
 	isClosedForComments,
 	setCommentBeingRepliedTo,
 	user,
@@ -400,7 +397,7 @@ export const Comment = ({
 										<Column>
 											<div
 												css={[
-													colourStyles(format),
+													colourStyles,
 													boldFont,
 													negativeMargin,
 												]}
@@ -441,7 +438,7 @@ export const Comment = ({
 									<Row>
 										<div
 											css={[
-												colourStyles(format),
+												colourStyles,
 												boldFont,
 												cssReplyAlphaDisplayName,
 											]}
@@ -462,7 +459,7 @@ export const Comment = ({
 										{comment.responseTo ? (
 											<div
 												css={[
-													colourStyles(format),
+													colourStyles,
 													regularFont,
 													svgReplyArrow,
 													cssReplyBetaDisplayName,
@@ -630,9 +627,7 @@ export const Comment = ({
 												<div
 													css={[
 														svgReplyArrow,
-														buttonLinkPillarBaseStyles(
-															format,
-														),
+														buttonLinkPillarBaseStyles,
 														css`
 															button {
 																${textSans.small(
@@ -663,9 +658,7 @@ export const Comment = ({
 												<div
 													css={[
 														svgReplyArrow,
-														commentControlsLink(
-															format,
-														),
+														commentControlsLink,
 													]}
 												>
 													<Link
@@ -698,9 +691,7 @@ export const Comment = ({
 											comment.userProfile.userId && (
 											<div
 												css={[
-													buttonLinkPillarBaseStyles(
-														format,
-													),
+													buttonLinkPillarBaseStyles,
 													css`
 														button {
 															${textSans.small({
diff --git a/dotcom-rendering/src/components/Discussion/CommentContainer.stories.tsx b/dotcom-rendering/src/components/Discussion/CommentContainer.stories.tsx
index 5610ef266f4..76321d3ef4f 100644
--- a/dotcom-rendering/src/components/Discussion/CommentContainer.stories.tsx
+++ b/dotcom-rendering/src/components/Discussion/CommentContainer.stories.tsx
@@ -1,5 +1,5 @@
 import { ArticleDesign, ArticleDisplay, Pillar } from '@guardian/libs';
-import { lightDecorator } from '../../../.storybook/decorators/themeDecorator';
+import { splitTheme } from '../../../.storybook/decorators/splitThemeDecorator';
 import type { CommentType, SignedInUser } from '../../types/discussion';
 import { CommentContainer } from './CommentContainer';
 
@@ -181,10 +181,6 @@ const format = {
 export const defaultStory = () => (
 	<CommentContainer
 		comment={commentData}
-		format={{
-			...format,
-			theme: Pillar.Sport,
-		}}
 		isClosedForComments={false}
 		shortUrl="randomShortURL"
 		user={aUser}
@@ -197,21 +193,20 @@ export const defaultStory = () => (
 );
 defaultStory.storyName = 'default';
 defaultStory.decorators = [
-	lightDecorator([
-		{
-			...format,
-			theme: Pillar.Lifestyle,
-		},
-	]),
+	splitTheme(
+		[
+			{
+				...format,
+				theme: Pillar.Sport,
+			},
+		],
+		{ orientation: 'vertical' },
+	),
 ];
 
 export const threadedComment = () => (
 	<CommentContainer
 		comment={commentDataThreaded}
-		format={{
-			...format,
-			theme: Pillar.Lifestyle,
-		}}
 		isClosedForComments={false}
 		shortUrl="randomShortURL"
 		user={aUser}
@@ -224,21 +219,20 @@ export const threadedComment = () => (
 );
 threadedComment.storyName = 'threaded';
 threadedComment.decorators = [
-	lightDecorator([
-		{
-			...format,
-			theme: Pillar.Lifestyle,
-		},
-	]),
+	splitTheme(
+		[
+			{
+				...format,
+				theme: Pillar.Lifestyle,
+			},
+		],
+		{ orientation: 'vertical' },
+	),
 ];
 
 export const threadedCommentWithShowMore = () => (
 	<CommentContainer
 		comment={commentDataThreadedWithLongThread}
-		format={{
-			...format,
-			theme: Pillar.Lifestyle,
-		}}
 		isClosedForComments={false}
 		shortUrl="randomShortURL"
 		user={aUser}
@@ -251,21 +245,20 @@ export const threadedCommentWithShowMore = () => (
 );
 threadedCommentWithShowMore.storyName = 'threaded with show more button';
 threadedCommentWithShowMore.decorators = [
-	lightDecorator([
-		{
-			...format,
-			theme: Pillar.Lifestyle,
-		},
-	]),
+	splitTheme(
+		[
+			{
+				...format,
+				theme: Pillar.Lifestyle,
+			},
+		],
+		{ orientation: 'vertical' },
+	),
 ];
 
 export const threadedCommentWithLongUsernames = () => (
 	<CommentContainer
 		comment={commentDataThreadedWithLongUserNames}
-		format={{
-			...format,
-			theme: Pillar.Lifestyle,
-		}}
 		isClosedForComments={false}
 		shortUrl="randomShortURL"
 		user={aUser}
@@ -278,21 +271,20 @@ export const threadedCommentWithLongUsernames = () => (
 );
 threadedCommentWithLongUsernames.storyName = 'threaded with long usernames';
 threadedCommentWithLongUsernames.decorators = [
-	lightDecorator([
-		{
-			...format,
-			theme: Pillar.Lifestyle,
-		},
-	]),
+	splitTheme(
+		[
+			{
+				...format,
+				theme: Pillar.Lifestyle,
+			},
+		],
+		{ orientation: 'vertical' },
+	),
 ];
 
 export const threadedCommentWithLongUsernamesMobile = () => (
 	<CommentContainer
 		comment={commentDataThreadedWithLongUserNames}
-		format={{
-			...format,
-			theme: Pillar.Lifestyle,
-		}}
 		isClosedForComments={false}
 		shortUrl="randomShortURL"
 		user={aUser}
@@ -312,10 +304,13 @@ threadedCommentWithLongUsernamesMobile.story = {
 	},
 };
 threadedCommentWithLongUsernamesMobile.decorators = [
-	lightDecorator([
-		{
-			...format,
-			theme: Pillar.Lifestyle,
-		},
-	]),
+	splitTheme(
+		[
+			{
+				...format,
+				theme: Pillar.Lifestyle,
+			},
+		],
+		{ orientation: 'vertical' },
+	),
 ];
diff --git a/dotcom-rendering/src/components/Discussion/CommentContainer.test.tsx b/dotcom-rendering/src/components/Discussion/CommentContainer.test.tsx
index df35999525b..13935598b54 100644
--- a/dotcom-rendering/src/components/Discussion/CommentContainer.test.tsx
+++ b/dotcom-rendering/src/components/Discussion/CommentContainer.test.tsx
@@ -1,5 +1,4 @@
 import '@testing-library/jest-dom/extend-expect';
-import { ArticleDesign, ArticleDisplay, Pillar } from '@guardian/libs';
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import { comment } from '../../../fixtures/manual/comment';
 import { mockedMessageID, mockRESTCalls } from '../../lib/mockRESTCalls';
@@ -39,12 +38,6 @@ const aUser: SignedInUser = {
 	authStatus: { kind: 'SignedInWithCookies' },
 };
 
-const format = {
-	design: ArticleDesign.Standard,
-	display: ArticleDisplay.Standard,
-	theme: Pillar.News,
-};
-
 describe('CommentContainer', () => {
 	it('Post a comment to a root comment', async () => {
 		const newCommentText = 'A brand new comment';
@@ -65,7 +58,6 @@ describe('CommentContainer', () => {
 			<CommentContainer
 				shortUrl=""
 				comment={commentWithoutReply} //TODO: should be comments with reponses
-				format={format}
 				user={aUser}
 				threads="collapsed"
 				commentBeingRepliedTo={commentBeingRepliedTo}
@@ -103,7 +95,6 @@ describe('CommentContainer', () => {
 			<CommentContainer
 				shortUrl=""
 				comment={commentWithoutReply} //TODO: should be comments with reponses
-				format={format}
 				user={aUser}
 				threads="collapsed"
 				commentBeingRepliedTo={commentBeingRepliedTo}
@@ -140,7 +131,6 @@ describe('CommentContainer', () => {
 			<CommentContainer
 				shortUrl=""
 				comment={commentWithReply} //TODO: should be comments with reponses
-				format={format}
 				user={aUser}
 				threads="collapsed"
 				commentBeingRepliedTo={commentBeingRepliedTo}
@@ -178,7 +168,6 @@ describe('CommentContainer', () => {
 			<CommentContainer
 				shortUrl=""
 				comment={commentWithoutReply} //TODO: should be comments with reponses
-				format={format}
 				user={aUser}
 				threads="collapsed"
 				commentBeingRepliedTo={commentBeingRepliedTo}
diff --git a/dotcom-rendering/src/components/Discussion/CommentContainer.tsx b/dotcom-rendering/src/components/Discussion/CommentContainer.tsx
index fee0a37aea5..08c84e9fdf0 100644
--- a/dotcom-rendering/src/components/Discussion/CommentContainer.tsx
+++ b/dotcom-rendering/src/components/Discussion/CommentContainer.tsx
@@ -16,7 +16,6 @@ import { PillarButton } from './PillarButton';
 
 type Props = {
 	comment: CommentType;
-	format: ArticleFormat;
 	isClosedForComments: boolean;
 	shortUrl: string;
 	user?: SignedInUser;
@@ -72,7 +71,6 @@ export const avatar = (avatarSize: number) => css`
 
 export const CommentContainer = ({
 	comment,
-	format,
 	isClosedForComments,
 	user,
 	shortUrl,
@@ -124,7 +122,6 @@ export const CommentContainer = ({
 		<div css={[commentToScrollTo === comment.id && selectedStyles]}>
 			<Comment
 				comment={comment}
-				format={format}
 				isClosedForComments={isClosedForComments}
 				setCommentBeingRepliedTo={setCommentBeingRepliedTo}
 				user={user}
@@ -143,7 +140,6 @@ export const CommentContainer = ({
 								<li key={responseComment.id}>
 									<Comment
 										comment={responseComment}
-										format={format}
 										isClosedForComments={
 											isClosedForComments
 										}
@@ -209,7 +205,6 @@ export const CommentContainer = ({
 							css={nestingStyles}
 						>
 							<CommentReplyPreview
-								format={format}
 								commentBeingRepliedTo={commentBeingRepliedTo}
 							/>
 							<CommentForm
diff --git a/dotcom-rendering/src/components/Discussion/CommentReplyPreview.stories.tsx b/dotcom-rendering/src/components/Discussion/CommentReplyPreview.stories.tsx
index e4228874185..f90783f2647 100644
--- a/dotcom-rendering/src/components/Discussion/CommentReplyPreview.stories.tsx
+++ b/dotcom-rendering/src/components/Discussion/CommentReplyPreview.stories.tsx
@@ -1,8 +1,15 @@
 import { css } from '@emotion/react';
 import { ArticleDesign, ArticleDisplay, Pillar } from '@guardian/libs';
+import { splitTheme } from '../../../.storybook/decorators/splitThemeDecorator';
 import type { CommentType } from '../../types/discussion';
 import { CommentReplyPreview, Preview } from './CommentReplyPreview';
 
+const defaultFormat = {
+	display: ArticleDisplay.Standard,
+	design: ArticleDesign.Standard,
+	theme: Pillar.News,
+};
+
 export default { title: 'Discussion/CommentReplyPreview' };
 
 const singleLineParagraph =
@@ -51,16 +58,10 @@ const padding = css`
 `;
 
 export const Default = () => (
-	<CommentReplyPreview
-		format={{
-			display: ArticleDisplay.Standard,
-			design: ArticleDesign.Standard,
-			theme: Pillar.News,
-		}}
-		commentBeingRepliedTo={commentBeingRepliedTo}
-	/>
+	<CommentReplyPreview commentBeingRepliedTo={commentBeingRepliedTo} />
 );
 Default.storyName = 'default';
+Default.decorators = [splitTheme([defaultFormat])];
 
 export const SingleLinePreview = () => (
 	<div css={padding}>
@@ -75,6 +76,7 @@ export const SingleLinePreview = () => (
 	</div>
 );
 SingleLinePreview.storyName = 'Single line';
+SingleLinePreview.decorators = [splitTheme([defaultFormat])];
 
 export const SingleBlockPreview = () => (
 	<div css={padding}>
@@ -89,6 +91,7 @@ export const SingleBlockPreview = () => (
 	</div>
 );
 SingleBlockPreview.storyName = 'Single Block';
+SingleBlockPreview.decorators = [splitTheme([defaultFormat])];
 
 export const MultiBlockPreview = () => (
 	<div css={padding}>
@@ -103,3 +106,4 @@ export const MultiBlockPreview = () => (
 	</div>
 );
 MultiBlockPreview.storyName = 'Multi Block';
+MultiBlockPreview.decorators = [splitTheme([defaultFormat])];
diff --git a/dotcom-rendering/src/components/Discussion/CommentReplyPreview.tsx b/dotcom-rendering/src/components/Discussion/CommentReplyPreview.tsx
index 2f77359796a..a4d8d8c6b43 100644
--- a/dotcom-rendering/src/components/Discussion/CommentReplyPreview.tsx
+++ b/dotcom-rendering/src/components/Discussion/CommentReplyPreview.tsx
@@ -2,17 +2,15 @@ import { css } from '@emotion/react';
 import {
 	palette as sourcePalette,
 	space,
-	text,
 	textSans,
 } from '@guardian/source-foundations';
 import { Button, SvgIndent } from '@guardian/source-react-components';
 import { useState } from 'react';
-import { decidePalette } from '../../lib/decidePalette';
+import { palette as schemedPalette } from '../../palette';
 import type { CommentType } from '../../types/discussion';
 import { Row } from './Row';
 
 type Props = {
-	format: ArticleFormat;
 	commentBeingRepliedTo: CommentType;
 };
 
@@ -44,13 +42,13 @@ const replyPreviewHeaderStyle = css`
 `;
 
 const arrowSize = 15;
-const bg = sourcePalette.neutral[93];
+
 const previewStyle = css`
 	padding-top: ${space[3]}px;
 	padding-bottom: ${space[3]}px;
 	padding-left: ${space[5]}px;
 	padding-right: ${space[5]}px;
-	background-color: ${bg};
+	background-color: ${schemedPalette('--top-pick-background')};
 	margin-top: ${arrowSize}px;
 	margin-bottom: ${arrowSize + 5}px;
 	position: relative;
@@ -59,7 +57,8 @@ const previewStyle = css`
 	:before {
 		content: '';
 		position: absolute;
-		border-left: ${arrowSize}px solid ${bg};
+		border-left: ${arrowSize}px solid
+			${schemedPalette('--top-pick-background')};
 		border-top: ${arrowSize}px solid transparent;
 		top: -${arrowSize - 1}px;
 		margin-left: ${space[9]}px;
@@ -75,12 +74,12 @@ const commentStyles = css`
 `;
 
 const blueLink = css`
-	color: ${text.anchorPrimary};
+	color: ${schemedPalette('--discussion-link')};
 `;
 
-const buttonLinkPillarBaseStyles = (format: ArticleFormat) => css`
+const buttonLinkPillarBaseStyles = css`
 	button {
-		color: ${decidePalette(format).discussionGeneric};
+		color: ${schemedPalette('--discussion-colour')};
 		background-color: transparent;
 		height: 18px;
 		min-height: 18px;
@@ -89,7 +88,7 @@ const buttonLinkPillarBaseStyles = (format: ArticleFormat) => css`
 
 		:hover {
 			text-decoration: underline;
-			text-decoration-color: ${decidePalette(format).discussionGeneric};
+			text-decoration-color: ${schemedPalette('--discussion-colour')};
 		}
 	}
 `;
@@ -110,10 +109,7 @@ const buttonLinkBaseStyles = css`
 	}
 `;
 
-export const CommentReplyPreview = ({
-	format,
-	commentBeingRepliedTo,
-}: Props) => {
+export const CommentReplyPreview = ({ commentBeingRepliedTo }: Props) => {
 	const [displayReplyComment, setDisplayReplyComment] =
 		useState<boolean>(false);
 	return (
@@ -129,7 +125,7 @@ export const CommentReplyPreview = ({
 				<Space amount={3} />
 				<div
 					css={[
-						buttonLinkPillarBaseStyles(format),
+						buttonLinkPillarBaseStyles,
 						css`
 							button {
 								${textSans.small({ fontWeight: 'bold' })}
diff --git a/dotcom-rendering/src/components/Discussion/Comments.stories.tsx b/dotcom-rendering/src/components/Discussion/Comments.stories.tsx
index 1fb0b4eb18f..37849250c65 100644
--- a/dotcom-rendering/src/components/Discussion/Comments.stories.tsx
+++ b/dotcom-rendering/src/components/Discussion/Comments.stories.tsx
@@ -1,5 +1,7 @@
 import { css } from '@emotion/react';
 import { ArticleDesign, ArticleDisplay, Pillar } from '@guardian/libs';
+import { splitTheme } from '../../../.storybook/decorators/splitThemeDecorator';
+import { lightDecorator } from '../../../.storybook/decorators/themeDecorator';
 import type { SignedInUser } from '../../types/discussion';
 import { Comments } from './Comments';
 
@@ -56,6 +58,14 @@ export const LoggedOutHiddenPicks = () => (
 	</div>
 );
 LoggedOutHiddenPicks.storyName = 'when logged out, unexpanded and with picks';
+LoggedOutHiddenPicks.decorators = [
+	splitTheme([
+		{
+			...format,
+			theme: Pillar.Culture,
+		},
+	]),
+];
 
 export const InitialPage = () => (
 	<div
@@ -85,6 +95,14 @@ export const InitialPage = () => (
 	</div>
 );
 InitialPage.storyName = 'with initial page set to 3';
+InitialPage.decorators = [
+	splitTheme([
+		{
+			...format,
+			theme: Pillar.Lifestyle,
+		},
+	]),
+];
 
 export const Overrides = () => (
 	<div
@@ -116,6 +134,14 @@ export const Overrides = () => (
 	</div>
 );
 Overrides.storyName = 'with page size overridden to 50';
+Overrides.decorators = [
+	splitTheme([
+		{
+			...format,
+			theme: Pillar.Opinion,
+		},
+	]),
+];
 
 export const LoggedInHiddenNoPicks = () => (
 	<div
@@ -143,6 +169,7 @@ export const LoggedInHiddenNoPicks = () => (
 );
 LoggedInHiddenNoPicks.storyName =
 	'when logged in, with no picks and not expanded';
+LoggedInHiddenNoPicks.decorators = [splitTheme([format])];
 
 export const LoggedIn = () => (
 	<div
@@ -169,6 +196,7 @@ export const LoggedIn = () => (
 	</div>
 );
 LoggedIn.storyName = 'when logged in and expanded';
+LoggedIn.decorators = [lightDecorator([format])];
 
 export const LoggedInShortDiscussion = () => (
 	<div
@@ -195,6 +223,7 @@ export const LoggedInShortDiscussion = () => (
 	</div>
 );
 LoggedInShortDiscussion.storyName = 'when logged in but only two comments made';
+LoggedInShortDiscussion.decorators = [splitTheme([format])];
 
 export const LoggedOutHiddenNoPicks = () => (
 	<div
@@ -224,6 +253,14 @@ export const LoggedOutHiddenNoPicks = () => (
 );
 LoggedOutHiddenNoPicks.storyName =
 	'when logged out, with no picks and not expanded';
+LoggedOutHiddenNoPicks.decorators = [
+	splitTheme([
+		{
+			...format,
+			theme: Pillar.Sport,
+		},
+	]),
+];
 
 export const Closed = () => (
 	<div
@@ -253,6 +290,14 @@ export const Closed = () => (
 	</div>
 );
 Closed.storyName = 'Logged in but closed for comments';
+Closed.decorators = [
+	splitTheme([
+		{
+			...format,
+			theme: Pillar.Lifestyle,
+		},
+	]),
+];
 
 export const NoComments = () => (
 	<div
@@ -281,6 +326,14 @@ export const NoComments = () => (
 	</div>
 );
 NoComments.storyName = 'when no comments have been made';
+NoComments.decorators = [
+	splitTheme([
+		{
+			...format,
+			theme: Pillar.Culture,
+		},
+	]),
+];
 
 export const LegacyDiscussion = () => (
 	<div
@@ -309,3 +362,11 @@ export const LegacyDiscussion = () => (
 	</div>
 );
 LegacyDiscussion.storyName = "a legacy discussion that doesn't allow threading";
+LegacyDiscussion.decorators = [
+	splitTheme([
+		{
+			...format,
+			theme: Pillar.Culture,
+		},
+	]),
+];
diff --git a/dotcom-rendering/src/components/Discussion/Comments.tsx b/dotcom-rendering/src/components/Discussion/Comments.tsx
index 6ed3362ed61..7fa4d8a56bd 100644
--- a/dotcom-rendering/src/components/Discussion/Comments.tsx
+++ b/dotcom-rendering/src/components/Discussion/Comments.tsx
@@ -419,7 +419,6 @@ export const Comments = ({
 									<li key={comment.id}>
 										<CommentContainer
 											comment={comment}
-											format={format}
 											isClosedForComments={
 												isClosedForComments
 											}
@@ -498,7 +497,6 @@ export const Comments = ({
 							<li key={comment.id}>
 								<CommentContainer
 									comment={comment}
-									format={format}
 									isClosedForComments={isClosedForComments}
 									shortUrl={shortUrl}
 									user={user}
diff --git a/dotcom-rendering/src/palette.ts b/dotcom-rendering/src/palette.ts
index cdc4b34c34a..ac9f0e5b11c 100644
--- a/dotcom-rendering/src/palette.ts
+++ b/dotcom-rendering/src/palette.ts
@@ -4288,6 +4288,9 @@ const topPickLinkDark: PaletteFunction = () => sourcePalette.brand[800];
 const staffLabelLight: PaletteFunction = () => sourcePalette.brand[400];
 const staffLabelDark: PaletteFunction = () => sourcePalette.brand[600];
 
+const staffPickLight: PaletteFunction = () => sourcePalette.neutral[7];
+const staffPickDark: PaletteFunction = () => sourcePalette.neutral[97];
+
 const recommendationCountLight: PaletteFunction = () =>
 	sourcePalette.neutral[97];
 const recommendationCountDark: PaletteFunction = () =>
@@ -4342,7 +4345,7 @@ const discussionDark: PaletteFunction = ({ theme }) => {
 };
 
 const discussionLinkLight: PaletteFunction = () => sourcePalette.brand[500];
-const discussionLinkDark: PaletteFunction = () => sourcePalette.neutral[100];
+const discussionLinkDark: PaletteFunction = () => sourcePalette.brand[800];
 
 const discussionPrimaryButtonBackground: PaletteFunction = ({ theme }) => {
 	switch (theme) {
@@ -5094,6 +5097,10 @@ const paletteColours = {
 		light: staffLabelLight,
 		dark: staffLabelDark,
 	},
+	'--pick-label-color': {
+		light: staffPickLight,
+		dark: staffPickDark,
+	},
 	'--recommendation-count': {
 		light: recommendationCountLight,
 		dark: recommendationCountDark,