Disable darkmode for embeded simulators

site/source/App.tsx

@@ -1,7 +1,7 @@
 import Footer from '@/components/layout/Footer/Footer'
 import Header from '@/components/layout/Header'
 import Route404 from '@/components/Route404'
-import { useIsEmbedded } from '@/components/utils/embeddedContext'
+import { useIsEmbedded } from '@/components/utils/useIsEmbedded'
 import {
 	engineFactory,
 	EngineProvider,
@@ -90,17 +90,16 @@ const CatchOffline = ({ error }: ComponentProps<FallbackRender>) => {
 
 const App = () => {
 	const { relativeSitePaths } = useSitePaths()
-	const isEmbedded = useIsEmbedded()
 
 	useSaveAndRestoreScrollPosition()
-
+	const isEmbedded = useIsEmbedded()
 	if (!import.meta.env.PROD && import.meta.env.VITE_AXE_CORE_ENABLED) {
 		// eslint-disable-next-line react-hooks/rules-of-hooks
 		useAxeCoreAnalysis()
 	}
 
 	return (
-		<StyledLayout isEmbeded={isEmbedded}>
+		<StyledLayout isEmbedded={isEmbedded}>
 			{!isEmbedded && <Header />}
 			<main>
 				<Container>
@@ -156,10 +155,10 @@ const App = () => {
 }
 
 const StyledLayout = styled.div<{
-	isEmbeded: boolean
+	isEmbedded: boolean
 }>`
-	${({ isEmbeded }) =>
-		!isEmbeded &&
+	${({ isEmbedded }) =>
+		!isEmbedded &&
 		css`
 			flex-direction: column;
 			display: flex;

site/source/Provider.tsx

@@ -1,6 +1,5 @@
 import { ThemeColorsProvider } from '@/components/utils/colors'
 import { DisableAnimationOnPrintProvider } from '@/components/utils/DisableAnimationContext'
-import { IsEmbeddedProvider } from '@/components/utils/embeddedContext'
 import { GlobalStyle } from '@/design-system/global-style'
 import { Container } from '@/design-system/layout'
 import DesignSystemThemeProvider from '@/design-system/root'
@@ -82,19 +81,17 @@ export default function Provider({
 					!inIframe() && <ServiceWorker />}
 				<OverlayProvider>
 					<ReduxProvider store={store}>
-						<IsEmbeddedProvider>
-							<ThemeColorsProvider>
-								<DisableAnimationOnPrintProvider>
-									<SiteNameContext.Provider value={basename}>
-										<I18nextProvider i18n={i18next}>
-											<BrowserRouterProvider basename={basename}>
-												{children}
-											</BrowserRouterProvider>
-										</I18nextProvider>
-									</SiteNameContext.Provider>
-								</DisableAnimationOnPrintProvider>
-							</ThemeColorsProvider>
-						</IsEmbeddedProvider>
+						<ThemeColorsProvider>
+							<DisableAnimationOnPrintProvider>
+								<SiteNameContext.Provider value={basename}>
+									<I18nextProvider i18n={i18next}>
+										<BrowserRouterProvider basename={basename}>
+											{children}
+										</BrowserRouterProvider>
+									</I18nextProvider>
+								</SiteNameContext.Provider>
+							</DisableAnimationOnPrintProvider>
+						</ThemeColorsProvider>
 					</ReduxProvider>
 				</OverlayProvider>
 			</ErrorBoundary>

site/source/components/LegalNotice.tsx

@@ -7,7 +7,7 @@ import { useDarkMode } from '@/hooks/useDarkMode'
 
 export default function LegalNotice() {
 	const { t } = useTranslation()
-	const [ darkMode ] = useDarkMode()
+	const [darkMode] = useDarkMode()
 
 	return (
 		<PopoverWithTrigger

site/source/components/Logo.tsx

@@ -8,7 +8,7 @@ import styled from 'styled-components'
 export function Logo() {
 	const {
 		i18n: { language },
-		t
+		t,
 	} = useTranslation()
 
 	return (

site/source/components/PageData.tsx

@@ -1,4 +1,4 @@
-import { useIsEmbedded } from '@/components/utils/embeddedContext'
+import { useIsEmbedded } from '@/components/utils/useIsEmbedded'
 import Meta from '@/components/utils/Meta'
 import useSearchParamsSimulationSharing from '@/components/utils/useSearchParamsSimulationSharing'
 import useSimulationConfig from '@/components/utils/useSimulationConfig'

site/source/components/SearchButton.tsx

@@ -1,5 +1,4 @@
 import { Button } from '@/design-system/buttons'
-import { SROnly } from '@/design-system/global-style'
 import { PopoverWithTrigger } from '@/design-system'
 import { Trans, useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -13,6 +12,7 @@ export default function SearchButton() {
 			title={t('Que cherchez-vous ?')}
 			trigger={(buttonProps) => (
 				<StyledButton
+					size="XS"
 					className="print-hidden"
 					light
 					{...buttonProps}
@@ -34,9 +34,8 @@ export default function SearchButton() {
 							d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
 						/>
 					</StyledIcon>
-					<StyledLabel>
-						<Trans>Rechercher</Trans>
-					</StyledLabel>
+
+					<Trans>Rechercher</Trans>
 				</StyledButton>
 			)}
 			small
@@ -64,13 +63,10 @@ const StyledButton = styled(Button)`
 const StyledIcon = styled.svg`
 	height: ${({ theme }) => theme.spacings.md};
 	margin-right: ${({ theme }) => theme.spacings.xs};
-	@media (max-width: ${({ theme }) => theme.breakpointsWidth.sm}) {
-		margin-right: 0;
-	}
 `
 
-const StyledLabel = styled.span`
-	@media (max-width: ${({ theme }) => theme.breakpointsWidth.sm}) {
-		${SROnly}
-	}
-`
+// const StyledLabel = styled.span`
+// 	@media (max-width: ${({ theme }) => theme.breakpointsWidth.sm}) {
+// 		${SROnly}
+// 	}
+// `

site/source/components/Simulation/SimulationGoals.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import styled, { css, ThemeProvider } from 'styled-components'
 import { Logo } from '../Logo'
-import { useIsEmbedded } from '../utils/embeddedContext'
+import { useIsEmbedded } from '../utils/useIsEmbedded'
 import { WatchInitialRender } from '../utils/useInitialRender'
 
 type SimulationGoalsProps = {

site/source/components/charts/PagesCharts.tsx

@@ -157,6 +157,7 @@ export const StyledLegend = styled.div`
 			? theme.colors.extended.dark[600]
 			: theme.colors.extended.grey[100]};
 	padding: 0.125rem 1rem;
-	box-shadow: ${({ theme }) => theme.darkMode? theme.elevationsDarkMode[3] : theme.elevations[3]};
+	box-shadow: ${({ theme }) =>
+		theme.darkMode ? theme.elevationsDarkMode[3] : theme.elevations[3]};
 	border-radius: ${({ theme }) => theme.box.borderRadius};
 `

site/source/components/company/SearchDetails.tsx

@@ -79,7 +79,10 @@ function highlightLabelToJSX(highlightLabel: string) {
 }
 
 const Highlight = styled.strong`
-	background-color: ${({ theme }) => theme.darkMode ? theme.colors.bases.secondary[600] : theme.colors.bases.secondary[100]};
+	background-color: ${({ theme }) =>
+		theme.darkMode
+			? theme.colors.bases.secondary[600]
+			: theme.colors.bases.secondary[100]};
 `
 
 const CompanyContainer = styled.div`

site/source/components/conversation/AnswerList.tsx

@@ -284,13 +284,23 @@ const StyledAnswerList = styled(Grid)`
 	align-items: baseline;
 	justify-content: flex-end;
 	gap: ${({ theme }) => theme.spacings.sm};
-	color: ${({ theme }) => theme.darkMode ? theme.colors.bases.primary[100] : theme.colors.extended.dark[500]};
+	color: ${({ theme }) =>
+		theme.darkMode
+			? theme.colors.bases.primary[100]
+			: theme.colors.extended.dark[500]};
 	font-family: ${({ theme }) => theme.fonts.main};
 	:nth-child(2n) {
-		background-color: ${({ theme }) => theme.darkMode ? theme.colors.extended.dark[500] : theme.colors.bases.primary[100]};
+		background-color: ${({ theme }) =>
+			theme.darkMode
+				? theme.colors.extended.dark[500]
+				: theme.colors.bases.primary[100]};
 		color-adjust: exact !important;
 		outline: solid
 			${({ theme }) =>
-				`calc(${theme.spacings.md} / 2) ${theme.darkMode ? theme.colors.extended.dark[500] : theme.colors.bases.primary[100]}`};
+				`calc(${theme.spacings.md} / 2) ${
+					theme.darkMode
+						? theme.colors.extended.dark[500]
+						: theme.colors.bases.primary[100]
+				}`};
 	}
 `

site/source/components/layout/Header.tsx

@@ -66,10 +66,13 @@ export default function Header() {
 }
 
 const StyledHeader = styled.div`
-	height: ${({ theme }) => theme.spacings.xxxl};
+	min-height: ${({ theme }) => theme.spacings.xxxl};
 	display: flex;
+	flex-wrap: wrap;
 	align-items: center;
-	gap: ${({ theme }) => theme.spacings.xs};
+	justify-content: center;
+	column-gap: ${({ theme }) => theme.spacings.xs};
+	row-gap: ${({ theme }) => theme.spacings.md};
 	a {
 		height: 100%;
 		display: flex;

site/source/components/utils/colors.tsx

@@ -1,7 +1,7 @@
 import { hexToHSL } from '@/hexToHSL'
 import React, { useEffect, useRef, useState } from 'react'
 import { ThemeProvider } from 'styled-components'
-import { useIsEmbedded } from './embeddedContext'
+import { useIsEmbedded } from './useIsEmbedded'
 
 type ProviderProps = {
 	color?: [number, number, number]
@@ -60,9 +60,8 @@ export function ThemeColorsProvider({ children }: ProviderProps) {
 			`${saturation}%`
 		)
 	}, [hue, saturation])
-	const isEmbedded = useIsEmbedded()
-
-	if (!themeColor && !isEmbedded) {
+	const isEmbeded = useIsEmbedded()
+	if (!themeColor && !isEmbeded) {
 		return <>{children}</>
 	}
 

site/source/components/utils/embeddedContext.tsx

@@ -1,55 +0,0 @@
-import React, {
-	createContext,
-	ReactNode,
-	useContext,
-	useEffect,
-	useState,
-} from 'react'
-
-/*
-	Instead of relying on a contextual Provider that activates the
-	EmbeddedContext only to iframe paths, we use a global root Context, that
-	is modified by side effect when we detect that we are inside an iframe path.
-
-	Its value will not be changed again during the user journey. This means that
-	the documentation pages will still be displayed with the Embedded style (no
-	header, no footer)
-*/
-const IsEmbeddedContext = createContext<[boolean, (b: boolean) => void]>([
-	false,
-	() => {
-		throw new Error(
-			'useActivateEmbeded cannot be called outside IsEmbededContextProvider'
-		)
-	},
-])
-
-export function IsEmbeddedProvider({
-	children,
-	isEmbeded = false,
-}: {
-	children: ReactNode
-	isEmbeded?: boolean
-}) {
-	const state = useState(isEmbeded)
-
-	return (
-		<IsEmbeddedContext.Provider value={state}>
-			{children}
-		</IsEmbeddedContext.Provider>
-	)
-}
-
-export function useIsEmbedded() {
-	return useContext(IsEmbeddedContext)[0]
-}
-
-export function IsEmbeded({ children }: { children: React.ReactNode }) {
-	const setEmbedded = useContext(IsEmbeddedContext)[1]
-
-	useEffect(() => {
-		setEmbedded(true)
-	}, [setEmbedded])
-
-	return <IsEmbeddedProvider isEmbeded>{children}</IsEmbeddedProvider>
-}

site/source/components/utils/markdown.tsx

@@ -78,14 +78,20 @@ type MarkdownProps = React.ComponentProps<typeof MarkdownToJsx> & {
 const Code = styled.code`
 	overflow: auto;
 	padding: 0.25rem;
-	background-color: ${({ theme }) => theme.darkMode ? theme.colors.extended.dark[600] : theme.colors.extended.grey[300]};
+	background-color: ${({ theme }) =>
+		theme.darkMode
+			? theme.colors.extended.dark[600]
+			: theme.colors.extended.grey[300]};
 	border-radius: 0.25rem;
 `
 
 const Pre = styled.pre`
 	overflow: auto;
 	padding: 0.5rem;
-	background-color: ${({ theme }) => theme.darkMode ? theme.colors.extended.dark[600] : theme.colors.extended.grey[300]};
+	background-color: ${({ theme }) =>
+		theme.darkMode
+			? theme.colors.extended.dark[600]
+			: theme.colors.extended.grey[300]};
 	border-radius: 0.25rem;
 
 	& ${Code} {

site/source/components/utils/useIsEmbedded.tsx

@@ -0,0 +1,18 @@
+import { useMatch } from 'react-router-dom'
+
+export function useIsEmbedded(): boolean {
+	try {
+		if (useMatch('/iframes/*')) {
+			return true
+		}
+	} catch (e) {
+		// When useMatch is called outside ReactRouter context, it raise an error. We can safely ignore it.
+	}
+	if (import.meta.env.SSR) {
+		return false
+	}
+
+	return !!new URLSearchParams(document.location.search.substring(1)).get(
+		'iframe'
+	)
+}

site/source/contexts/DarkModeContext.tsx

@@ -1,4 +1,4 @@
-import { useIsEmbedded } from '@/components/utils/embeddedContext'
+import { useIsEmbedded } from '@/components/utils/useIsEmbedded'
 import React, { useEffect } from 'react'
 
 type DarkModeContextType = [boolean, (darkMode: boolean) => void]
@@ -7,20 +7,15 @@ const persistDarkMode = (darkMode: boolean) => {
 	localStorage.setItem('darkMode', darkMode.toString())
 }
 
-const useDefaultDarkMode = () => {
-	const isEmbeded = useIsEmbedded()
-
-	if (isEmbeded) {
+const getDefaultDarkMode = () => {
+	if (import.meta.env.SSR) {
 		return false
 	}
-	if (localStorage.getItem('darkMode')) {
+	if (localStorage?.getItem('darkMode')) {
 		return localStorage.getItem('darkMode') === 'true'
 	}
 
-	return (
-		window.matchMedia &&
-		window.matchMedia('(prefers-color-scheme: dark)').matches
-	)
+	return matchMedia?.('(prefers-color-scheme: dark)').matches
 }
 
 export const DarkModeContext = React.createContext<DarkModeContextType>([
@@ -32,7 +27,7 @@ export const DarkModeContext = React.createContext<DarkModeContextType>([
 ])
 
 export const DarkModeProvider: React.FC = ({ children }) => {
-	const [darkMode, _setDarkMode] = React.useState<boolean>(useDefaultDarkMode())
+	const [darkMode, _setDarkMode] = React.useState<boolean>(getDefaultDarkMode())
 
 	const setDarkMode = (darkMode: boolean) => {
 		_setDarkMode(darkMode)
@@ -57,7 +52,9 @@ export const DarkModeProvider: React.FC = ({ children }) => {
 	})
 
 	return (
-		<DarkModeContext.Provider value={[darkMode, setDarkMode]}>
+		<DarkModeContext.Provider
+			value={[!useIsEmbedded() && darkMode, setDarkMode]}
+		>
 			{children}
 		</DarkModeContext.Provider>
 	)

site/source/design-system/card/Article.tsx

@@ -73,7 +73,10 @@ const StyledArticle = styled.div`
 	display: block;
 	text-decoration: none;
 	&:hover {
-		background-color: ${({ theme }) => theme.darkMode ? theme.colors.bases.secondary[600] : theme.colors.bases.secondary[100]};
+		background-color: ${({ theme }) =>
+			theme.darkMode
+				? theme.colors.bases.secondary[600]
+				: theme.colors.bases.secondary[100]};
 	}
 	&:hover ${StyledLink} {
 		${StyledLinkHover}
@@ -84,7 +87,10 @@ const StyledArticle = styled.div`
 `
 
 const StyledHeader = styled(H4)`
-	color: ${({ theme }) => theme.darkMode ? theme.colors.bases.primary[200] : theme.colors.bases.primary[600]};
+	color: ${({ theme }) =>
+		theme.darkMode
+			? theme.colors.bases.primary[200]
+			: theme.colors.bases.primary[600]};
 `
 
 const StyledChevron = styled(Chevron)`

site/source/design-system/card/Card.tsx

@@ -131,9 +131,11 @@ export const CardContainer = styled.div<{ $compact?: boolean }>`
 			? theme.colors.extended.dark[600]
 			: theme.colors.extended.grey[100]};
 	border-radius: ${({ theme }) => theme.box.borderRadius};
-	box-shadow: ${({ theme }) => theme.darkMode ? theme.elevationsDarkMode[2] : theme.elevations[2]};
+	box-shadow: ${({ theme }) =>
+		theme.darkMode ? theme.elevationsDarkMode[2] : theme.elevations[2]};
 	&:hover {
-		box-shadow: ${({ theme }) => theme.darkMode? theme.elevationsDarkMode[3] : theme.elevations[3]};
+		box-shadow: ${({ theme }) =>
+			theme.darkMode ? theme.elevationsDarkMode[3] : theme.elevations[3]};
 		background-color: ${({ theme }) =>
 			theme.darkMode
 				? theme.colors.extended.dark[500]

site/source/design-system/card/SmallCard.tsx

@@ -56,12 +56,20 @@ const Container = styled.div`
 	word-break: break-word;
 	cursor: pointer;
 	align-items: center;
-	background-color: ${({ theme }) => theme.darkMode ? theme.colors.bases.primary[700] : theme.colors.bases.primary[200]};
+	background-color: ${({ theme }) =>
+		theme.darkMode
+			? theme.colors.bases.primary[700]
+			: theme.colors.bases.primary[200]};
 	border-radius: 0.375rem;
-	box-shadow: ${({ theme }) => theme.darkMode ? theme.elevationsDarkMode[2] : theme.elevations[2]};
+	box-shadow: ${({ theme }) =>
+		theme.darkMode ? theme.elevationsDarkMode[2] : theme.elevations[2]};
 	&:hover {
-		box-shadow: ${({ theme }) => theme.darkMode ? theme.elevationsDarkMode[3] : theme.elevations[3]};
-		background-color: ${({ theme }) => theme.darkMode ? theme.colors.bases.primary[600]:theme.colors.bases.primary[400]};
+		box-shadow: ${({ theme }) =>
+			theme.darkMode ? theme.elevationsDarkMode[3] : theme.elevations[3]};
+		background-color: ${({ theme }) =>
+			theme.darkMode
+				? theme.colors.bases.primary[600]
+				: theme.colors.bases.primary[400]};
 	}
 	&:focus-visible {
 		${FocusStyle}

site/source/design-system/field/Radio/ToggleGroup.tsx

@@ -47,13 +47,20 @@ export const ToggleGroupContainer = styled.div<{ hideRadio: boolean }>`
 		position: relative;
 		align-items: center;
 		z-index: 1;
-		border: 1px solid ${({ theme }) => theme.darkMode ? theme.colors.extended.dark[500] : theme.colors.extended.grey[500]};
+		border: 1px solid
+			${({ theme }) =>
+				theme.darkMode
+					? theme.colors.extended.dark[500]
+					: theme.colors.extended.grey[500]};
 		margin: 0;
 		margin-right: -1px;
 		border-radius: 0;
 		cursor: pointer;
 		padding: ${({ theme: { spacings } }) => spacings.xs + ' ' + spacings.lg};
-		background: ${({ theme }) => theme.darkMode ? theme.colors.extended.dark[600] : theme.colors.extended.grey[100]};
+		background: ${({ theme }) =>
+			theme.darkMode
+				? theme.colors.extended.dark[600]
+				: theme.colors.extended.grey[100]};
 	}
 
 	${LabelBody} {
@@ -74,12 +81,22 @@ export const ToggleGroupContainer = styled.div<{ hideRadio: boolean }>`
 
 	${InputRadio}:checked + ${VisibleRadio} {
 		z-index: 2;
-		border: 1px solid ${({ theme }) => theme.darkMode ? theme.colors.bases.primary[400] : theme.colors.bases.primary[700]};
-		background-color: ${({ theme }) => theme.darkMode ? theme.colors.bases.primary[500] : theme.colors.bases.primary[200]};
+		border: 1px solid
+			${({ theme }) =>
+				theme.darkMode
+					? theme.colors.bases.primary[400]
+					: theme.colors.bases.primary[700]};
+		background-color: ${({ theme }) =>
+			theme.darkMode
+				? theme.colors.bases.primary[500]
+				: theme.colors.bases.primary[200]};
 	}
 
 	${VisibleRadio}:hover {
-		background-color: ${({ theme }) => theme.darkMode ? theme.colors.bases.primary[700] : theme.colors.bases.primary[100]};
+		background-color: ${({ theme }) =>
+			theme.darkMode
+				? theme.colors.bases.primary[700]
+				: theme.colors.bases.primary[100]};
 	}
 	${RadioButton} {
 		${({ hideRadio }) =>

site/source/design-system/field/Select/ListBox.tsx

@@ -33,7 +33,9 @@ const List = styled.ul`
 
 const FocusedOption = css`
 	background-color: ${({ theme }) =>
-		theme.darkMode ? theme.colors.bases.primary[600] : theme.colors.bases.primary[100]} !important;
+		theme.darkMode
+			? theme.colors.bases.primary[600]
+			: theme.colors.bases.primary[100]} !important;
 	border-color: ${({ theme }) => theme.colors.bases.primary[500]} !important;
 `
 
@@ -46,14 +48,17 @@ const ListItem = styled.li<{ isFocused?: boolean; isSelected?: boolean }>`
 	text-align: left;
 	display: block;
 	color: ${({ theme, isSelected }) =>
-		theme.darkMode ? isSelected
+		theme.darkMode
+			? isSelected
 				? theme.colors.bases.primary[200]
 				: theme.colors.extended.dark[100]
 			: isSelected
-				? theme.colors.bases.primary[600]
-				: theme.colors.extended.grey[700]};
+			? theme.colors.bases.primary[600]
+			: theme.colors.extended.grey[700]};
 	background-color: ${({ theme }) =>
-		theme.darkMode ? theme.colors.extended.dark[500] : theme.colors.extended.grey[100]} !important;
+		theme.darkMode
+			? theme.colors.extended.dark[500]
+			: theme.colors.extended.grey[100]} !important;
 	width: 100%;
 
 	border-radius: 0.3rem;

site/source/design-system/field/Select/PopOver.tsx

@@ -16,10 +16,18 @@ const Wrapper = styled.div`
 	left: -1px;
 	z-index: 1000;
 	border-radius: ${({ theme }) => theme.box.borderRadius};
-	border: 1px solid ${({ theme }) =>  theme.darkMode ? theme.colors.extended.dark[600] :theme.colors.extended.grey[200]};
+	border: 1px solid
+		${({ theme }) =>
+			theme.darkMode
+				? theme.colors.extended.dark[600]
+				: theme.colors.extended.grey[200]};
 	width: calc(100% + 2px);
-	box-shadow: ${({ theme }) => theme.darkMode ? theme.elevationsDarkMode[2] : theme.elevations[2]};
-	background: ${({ theme }) => theme.darkMode ? theme.colors.extended.dark[500] : theme.colors.extended.grey[100]};
+	box-shadow: ${({ theme }) =>
+		theme.darkMode ? theme.elevationsDarkMode[2] : theme.elevations[2]};
+	background: ${({ theme }) =>
+		theme.darkMode
+			? theme.colors.extended.dark[500]
+			: theme.colors.extended.grey[100]};
 `
 
 export function Popover(props: PopoverProps) {

site/source/design-system/global-style.ts

@@ -109,6 +109,7 @@ html, body, #js, #js > * {
 *:before,
 *:after {
 	box-sizing: inherit;
+	transition: color 0.15s, background-color 0.15s;
 }
 
 body {

site/source/design-system/layout/Container.tsx

@@ -56,7 +56,7 @@ export default function Container({
 	backgroundColor,
 	children,
 }: ContainerProps) {
-	const [ darkMode ] = useDarkMode()
+	const [darkMode] = useDarkMode()
 
 	return (
 		<ThemeProvider theme={(theme) => ({ ...theme, darkMode })}>

site/source/design-system/root.tsx

@@ -1,7 +1,6 @@
-import React from 'react'
+import React, { ReactNode } from 'react'
 import isbot from 'isbot'
 import urssafTheme from '@/design-system/theme'
-import { ReactNode } from 'react'
 import styled, {
 	StyleSheetManager,
 	ThemeProvider,
@@ -29,7 +28,7 @@ const SystemRoot = ({ children }: SystemRootProps) => {
 }
 
 const Background: React.FC = ({ children }) => {
-	const [ darkMode ] = useDarkMode()
+	const [darkMode] = useDarkMode()
 
 	return <BackgroundStyle $darkMode={darkMode}>{children}</BackgroundStyle>
 }

site/source/pages/Budget/Budget.tsx

@@ -269,7 +269,10 @@ const RessourcesAllocationTable = styled.table`
 
 	tbody tr:nth-child(odd),
 	tfoot tr:nth-child(odd) {
-		background: ${({ theme }) => theme.darkMode ? theme.colors.extended.dark[600] : theme.colors.bases.primary[200]};
+		background: ${({ theme }) =>
+			theme.darkMode
+				? theme.colors.extended.dark[600]
+				: theme.colors.bases.primary[200]};
 	}
 
 	thead,

site/source/pages/Iframes/index.tsx

@@ -1,5 +1,4 @@
 import Route404 from '@/components/Route404'
-import { IsEmbeded } from '@/components/utils/embeddedContext'
 import { Helmet } from 'react-helmet-async'
 import { Route, Routes } from 'react-router-dom'
 import SimulateurPage from '../../components/PageData'
@@ -10,7 +9,7 @@ export default function Iframes() {
 	const simulators = useSimulatorsData()
 
 	return (
-		<IsEmbeded>
+		<>
 			{/** Open external links in the parent frame.
 			This behavior can be configured on individual link, eg <a target="_blank" />.
 			Our own link are handled in-app by the router, and aren't affected by this directive.
@@ -40,6 +39,6 @@ export default function Iframes() {
 				<Route path="*" element={<Route404 />} />
 			</Routes>
 			<IframeFooter />
-		</IsEmbeded>
+		</>
 	)
 }

site/source/pages/Nouveautes/Nouveautes.tsx

@@ -168,7 +168,10 @@ const SidebarLink = styled(Link)<GenericButtonOrNavLinkProps>`
 	padding: 0.5rem 1rem;
 	border-bottom: 1px solid #e6e9ec;
 	&:hover {
-		background-color: ${({ theme }) => theme.darkMode ? theme.colors.bases.primary[700] : theme.colors.bases.primary[100]};
+		background-color: ${({ theme }) =>
+			theme.darkMode
+				? theme.colors.bases.primary[700]
+				: theme.colors.bases.primary[100]};
 	}
 `
 

site/source/pages/Simulateurs/ChômagePartiel.tsx

@@ -5,7 +5,7 @@ import Simulation, {
 } from '@/components/Simulation'
 import { FromTop } from '@/components/ui/animate'
 import Warning from '@/components/ui/WarningBlock'
-import { useIsEmbedded } from '@/components/utils/embeddedContext'
+import { useIsEmbedded } from '@/components/utils/useIsEmbedded'
 import { useEngine } from '@/components/utils/EngineContext'
 import { Li, Ul } from '@/design-system/typography/list'
 import { DottedName } from 'modele-social'

site/source/pages/Simulateurs/EconomieCollaborative/index.tsx

@@ -1,4 +1,4 @@
-import { useIsEmbedded } from '@/components/utils/embeddedContext'
+import { useIsEmbedded } from '@/components/utils/useIsEmbedded'
 import { Link } from '@/design-system/typography/link'
 import { useSitePaths } from '@/sitePaths'
 import { Trans } from 'react-i18next'

site/source/pages/Simulateurs/Home.tsx

@@ -1,6 +1,6 @@
 import PageHeader from '@/components/PageHeader'
 import InfoBulle from '@/design-system/InfoBulle'
-import { useIsEmbedded } from '@/components/utils/embeddedContext'
+import { useIsEmbedded } from '@/components/utils/useIsEmbedded'
 import Emoji from '@/components/utils/Emoji'
 import { Card } from '@/design-system/card'
 import { SmallCard } from '@/design-system/card/SmallCard'

site/source/pages/Simulateurs/index.tsx

@@ -1,4 +1,4 @@
-import { useIsEmbedded } from '@/components/utils/embeddedContext'
+import { useIsEmbedded } from '@/components/utils/useIsEmbedded'
 import { usePersistingState } from '@/components/utils/persistState'
 import { ScrollToTop } from '@/components/utils/Scroll'
 import { Link } from '@/design-system/typography/link'
@@ -29,7 +29,6 @@ export default function Simulateurs() {
 		}
 	}, [setLastState, state])
 	const simulatorsData = useSimulatorsData()
-	const isEmbedded = useIsEmbedded()
 	const simulatorRoutes = useMemo(
 		() =>
 			Object.values(simulatorsData)
@@ -47,6 +46,7 @@ export default function Simulateurs() {
 				)),
 		[simulatorsData, absoluteSitePaths]
 	)
+	const isEmbedded = useIsEmbedded()
 
 	return (
 		<>

site/source/pages/Stats/utils.tsx

@@ -37,7 +37,8 @@ export function formatMonth(date: string | Date) {
 const StyledIndicator = styled.div`
 	border-radius: ${({ theme }) => theme.box.borderRadius};
 	height: 100%;
-	box-shadow: ${({ theme }) => theme.darkMode ? theme.elevationsDarkMode[2] : theme.elevations[2]};
+	box-shadow: ${({ theme }) =>
+		theme.darkMode ? theme.elevationsDarkMode[2] : theme.elevations[2]};
 	padding: ${({ theme }) => theme.spacings.xs}
 		${({ theme }) => theme.spacings.md};
 `

site/source/template.html

@@ -191,8 +191,7 @@
 			const isIframe = (new URLSearchParams(
 					document.location.search.substring(1)
 				).get('iframe'))
-			const darkMode = localStorage.getItem('darkMode') === 'true' && !isIframe
-			console.log(isIframe, darkMode)
+			const darkMode = window.localStorage && window.localStorage.getItem('darkMode') === 'true' && !isIframe
 
 			if (darkMode) {
 				document.body.style.backgroundColor = '#0f172a'