diff --git a/site/source/contexts/DarkModeContext.tsx b/site/source/contexts/DarkModeContext.tsx index 4e4b8b3b7..efdf174a5 100644 --- a/site/source/contexts/DarkModeContext.tsx +++ b/site/source/contexts/DarkModeContext.tsx @@ -60,12 +60,13 @@ export const DarkModeProvider: React.FC = ({ children }) => { : matchDarkMode.removeListener(onDarkModeChange) } }) + const finalDarkMode = !useIsEmbedded() && darkMode return ( - + + {/* ({ ...theme, darkMode: finalDarkMode })}> */} {children} + {/* */} ) } diff --git a/site/source/design-system/layout/Container.tsx b/site/source/design-system/layout/Container.tsx index aece70862..76982dde4 100644 --- a/site/source/design-system/layout/Container.tsx +++ b/site/source/design-system/layout/Container.tsx @@ -55,12 +55,18 @@ type ContainerProps = { export default function Container({ backgroundColor, + darkMode, children, }: ContainerProps) { - const [darkMode] = useDarkMode() + const [defaultDarkMode] = useDarkMode() return ( - ({ ...theme, darkMode })}> + ({ + ...theme, + darkMode: darkMode ?? defaultDarkMode ?? theme?.darkMode, + })} + > {children} diff --git a/site/source/pages/Simulateurs/metadata.tsx b/site/source/pages/Simulateurs/metadata.tsx index 952a6e562..a0523b71f 100644 --- a/site/source/pages/Simulateurs/metadata.tsx +++ b/site/source/pages/Simulateurs/metadata.tsx @@ -1,5 +1,6 @@ import { createContext, useMemo } from 'react' import { TFunction, Trans, useTranslation } from 'react-i18next' +import styled, { css } from 'styled-components' import { PlaceDesEntreprisesButton } from '@/components/PlaceDesEntreprises' import RuleLink from '@/components/RuleLink' @@ -98,7 +99,7 @@ function getSimulatorsData({ t, sitePaths, language }: SimulatorsDataParams) { (CDD, statut cadre, heures supplémentaires, temps partiel, titre-restaurants, etc.). - Par ailleurs depuis 2019, l' @@ -754,3 +753,12 @@ export const CurrentSimulatorDataContext = createContext | null>(null) export const CurrentSimulatorDataProvider = CurrentSimulatorDataContext.Provider + +const StyledImage = styled.img` + width: 100%; + ${({ theme }) => + theme.darkMode && + css` + filter: invert() brightness(150%); + `} +`