add palette declarations in article page for light and dark modes

dotcom-rendering/src/components/ArticlePage.tsx

@@ -6,6 +6,7 @@ import { DecideLayout } from '../layouts/DecideLayout';
 import { buildAdTargeting } from '../lib/ad-targeting';
 import { filterABTestSwitches } from '../model/enhance-switches';
 import type { NavType } from '../model/extract-nav';
+import { paletteDeclarations } from '../palette';
 import type { DCRArticle } from '../types/frontend';
 import type { RenderingTarget } from '../types/renderingTarget';
 import { AlreadyVisited } from './AlreadyVisited.importable';
@@ -57,6 +58,17 @@ export const ArticlePage = (props: WebProps | AppProps) => {
 		<StrictMode>
 			<Global
 				styles={css`
+					:root {
+						${paletteDeclarations(format, 'light')}
+
+						${renderingTarget === 'Apps'
+							? css`
+									@media (prefers-color-scheme: dark) {
+										${paletteDeclarations(format, 'dark')}
+									}
+							  `
+							: ''}
+					}
 					/* Crude but effective mechanism. Specific components may need to improve on this behaviour. */
 					/* The not(.src...) selector is to work with Source's FocusStyleManager. */
 					*:focus {

dotcom-rendering/src/components/HeadlineExample.stories.tsx

@@ -2,9 +2,9 @@
 
 import { css } from '@emotion/react';
 import { ArticleDesign, ArticleDisplay, ArticlePillar } from '@guardian/libs';
-import type { Meta, StoryObj, Decorator } from '@storybook/react';
-import { HeadlineExample } from './HeadlineExample';
+import type { Decorator, Meta, StoryObj } from '@storybook/react';
 import { paletteDeclarations } from '../palette';
+import { HeadlineExample } from './HeadlineExample';
 
 // ----- Meta ----- //
 
@@ -21,7 +21,7 @@ export default meta;
  * Creates storybook decorator used to wrap components in an element
  * containing the light or dark mode palette colours.
  *
- * @param colourScheme Choose whether to use the light or dark palette.
+ * @param colourScheme Choose whether to use the light or darPerformanceNavigation.type palette.
  * @returns A decorator that wraps the component in a `div` containing the
  * palette colours as CSS custom properties.
  */