Merge pull request #13637 from guardian/disable-datawrapper-dark-mode-on-web

Disable dark mode for Datawrapper embeds on web

Author: frederickobrien

dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx

@@ -15,6 +15,7 @@ import { useOnce } from '../lib/useOnce';
 import { palette as themePalette } from '../palette';
 import type { RoleType } from '../types/content';
 import { Caption } from './Caption';
+import { useConfig } from './ConfigContext';
 import { defaultRoleStyles } from './Figure';
 import { Placeholder } from './Placeholder';
 
@@ -324,6 +325,7 @@ export const InteractiveBlockComponent = ({
 	const wrapperRef = useRef<HTMLDivElement>(null);
 	const placeholderLinkRef = useRef<HTMLAnchorElement>(null);
 	const [loaded, setLoaded] = useState(false);
+	const { darkModeAvailable } = useConfig();
 	useOnce(() => {
 		// We've brought the behavior from boot.js into this file to avoid loading 2 extra scripts
 		if (
@@ -346,6 +348,22 @@ export const InteractiveBlockComponent = ({
 			// Datawrapper-specific fix to suppress scrollbars appearing
 			if (url.includes('datawrapper')) {
 				iframe.scrolling = 'no';
+				// Turn off dark mode for Datawrapper embeds on web
+				// This should be removed if/when dark mode is implements on the website
+				if (
+					!document.querySelector('.ios') &&
+					!document.querySelector('.android')
+				) {
+					const prefersDarkScheme = window.matchMedia(
+						'(prefers-color-scheme: dark)',
+					).matches;
+					const darkMode = darkModeAvailable && prefersDarkScheme;
+					if (!darkMode) {
+						iframe.src +=
+							(iframe.src.includes('?') ? '&' : '?') +
+							'dark=false';
+					}
+				}
 			}
 
 			setupWindowListeners(iframe);