Add logic to prioritize system value for darkMode

site/source/components/layout/Header.tsx

@@ -46,7 +46,7 @@ export default function Header() {
 					>
 						<Emoji emoji="☀️" aria-hidden />
 						<Switch
-							defaultSelected={darkMode}
+							isSelected={darkMode}
 							onChange={setDarkMode}
 							aria-label={t(
 								darkMode

site/source/contexts/DarkModeContext.tsx

@@ -1,4 +1,5 @@
-import React from 'react'
+import { useIsEmbedded } from '@/components/utils/embeddedContext'
+import React, { useEffect } from 'react'
 
 type DarkModeContextType = [boolean, (darkMode: boolean) => void]
 
@@ -6,19 +7,20 @@ const persistDarkMode = (darkMode: boolean) => {
 	localStorage.setItem('darkMode', darkMode.toString())
 }
 
-const getDefaultDarkMode = () => {
+const useDefaultDarkMode = () => {
+	const isEmbeded = useIsEmbedded()
+
+	if (isEmbeded) {
+		return false
+	}
 	if (localStorage.getItem('darkMode')) {
 		return localStorage.getItem('darkMode') === 'true'
 	}
 
-	if (import.meta.env.DEV && typeof window !== 'undefined') {
-		return (
-			window.matchMedia &&
-			window.matchMedia('(prefers-color-scheme: dark)').matches
-		)
-	}
-
-	return false
+	return (
+		window.matchMedia &&
+		window.matchMedia('(prefers-color-scheme: dark)').matches
+	)
 }
 
 export const DarkModeContext = React.createContext<DarkModeContextType>([
@@ -30,7 +32,7 @@ export const DarkModeContext = React.createContext<DarkModeContextType>([
 ])
 
 export const DarkModeProvider: React.FC = ({ children }) => {
-	const [darkMode, _setDarkMode] = React.useState<boolean>(getDefaultDarkMode())
+	const [darkMode, _setDarkMode] = React.useState<boolean>(useDefaultDarkMode())
 
 	const setDarkMode = (darkMode: boolean) => {
 		_setDarkMode(darkMode)
@@ -41,6 +43,19 @@ export const DarkModeProvider: React.FC = ({ children }) => {
 		console.log(darkMode ? 'Nuit' : 'Jour')
 	}
 
+	useEffect(() => {
+		if (!window.matchMedia) {
+			return
+		}
+		const onDarkModeChange = (e: MediaQueryListEvent) => {
+			setDarkMode(e.matches)
+		}
+		const matchDarkMode = window.matchMedia('(prefers-color-scheme: dark)')
+		matchDarkMode.addEventListener('change', onDarkModeChange)
+
+		return () => matchDarkMode.removeEventListener('change', onDarkModeChange)
+	})
+
 	return (
 		<DarkModeContext.Provider value={[darkMode, setDarkMode]}>
 			{children}

site/source/pages/integration/Iframe.tsx

@@ -21,7 +21,6 @@ import poleEmploiLogo from './_images/pole-emploi.png'
 import { Button } from '@/design-system/buttons'
 import { useDarkMode } from '@/hooks/useDarkMode'
 
-
 const checkIframe = (obj: SimulatorData[keyof SimulatorData]) =>
 	'iframePath' in obj && obj.iframePath && !('private' in obj && obj.private)
 
@@ -67,7 +66,7 @@ function IntegrationCustomizer() {
 		''
 
 	const iframeRef = useRef<HTMLIFrameElement>(null)
-	const iframeSrc = useHref(`/iframes/${currentIframePath}`)
+	const iframeSrc = useHref(`/iframes/${currentIframePath}?iframe=true`)
 
 	useEffect(() => {
 		window.addEventListener(
@@ -178,8 +177,8 @@ const PreviewIframe = styled.iframe`
 const PrevisualisationContainer = styled.div`
 	outline: 2px solid ${({ theme }) => theme.colors.extended.grey[300]};
 	margin-top: 2rem;
-	overflow: hidden;
 	background-color: white;
+	overflow: hidden;
 	outline-offset: 1rem;
 `
 
@@ -321,7 +320,7 @@ function IntegrationCode({
 	color,
 }: IntegrationCodeProps) {
 	const { t } = useTranslation()
-	const [ darkMode ] = useDarkMode()
+	const [darkMode] = useDarkMode()
 
 	const codeRef = useRef<HTMLDivElement>(null)
 	const [copied, setCopied] = useState(false)

site/source/template.html

@@ -188,7 +188,12 @@
 		</div>
 
 		<script>
-			const darkMode = localStorage.getItem('darkMode') === 'true'
+			const isIframe = (new URLSearchParams(
+					document.location.search.substring(1)
+				).get('iframe'))
+			const darkMode = localStorage.getItem('darkMode') === 'true' && !isIframe
+			console.log(isIframe, darkMode)
+
 			if (darkMode) {
 				document.body.style.backgroundColor = '#0f172a'
 			}