Répare quelques bugs dus au darkMode

fix #2392, fix #2379
pull/2348/head
Johan Girod 2022-11-21 09:58:50 +01:00
parent 196ccce0fe
commit 154db068bc
3 changed files with 24 additions and 9 deletions

View File

@ -60,12 +60,13 @@ export const DarkModeProvider: React.FC = ({ children }) => {
: matchDarkMode.removeListener(onDarkModeChange)
}
})
const finalDarkMode = !useIsEmbedded() && darkMode
return (
<DarkModeContext.Provider
value={[!useIsEmbedded() && darkMode, setDarkMode]}
>
<DarkModeContext.Provider value={[finalDarkMode, setDarkMode]}>
{/* <ThemeProvider theme={(theme) => ({ ...theme, darkMode: finalDarkMode })}> */}
{children}
{/* </ThemeProvider> */}
</DarkModeContext.Provider>
)
}

View File

@ -55,12 +55,18 @@ type ContainerProps = {
export default function Container({
backgroundColor,
darkMode,
children,
}: ContainerProps) {
const [darkMode] = useDarkMode()
const [defaultDarkMode] = useDarkMode()
return (
<ThemeProvider theme={(theme) => ({ ...theme, darkMode })}>
<ThemeProvider
theme={(theme) => ({
...theme,
darkMode: darkMode ?? defaultDarkMode ?? theme?.darkMode,
})}
>
<OuterOuterContainer>
<OuterContainer backgroundColor={backgroundColor}>
<InnerContainer>{children}</InnerContainer>

View File

@ -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.).
</Body>
<img
<StyledImage
src={
language === 'fr'
? urlIllustrationNetBrut
@ -108,9 +109,7 @@ function getSimulatorsData({ t, sitePaths, language }: SimulatorsDataParams) {
'pages.simulateurs.salarié.alt-image1',
'Salaire net (perçu par le salarié) est égal à Salaire brut (inscrit dans le contrat de travail) moins cotisations salariales (retraite, csg, etc)'
)}
css={`
width: 100%;
`}
css={``}
/>
<Body>
Par ailleurs depuis 2019, l'
@ -754,3 +753,12 @@ export const CurrentSimulatorDataContext = createContext<Overwrite<
> | null>(null)
export const CurrentSimulatorDataProvider = CurrentSimulatorDataContext.Provider
const StyledImage = styled.img`
width: 100%;
${({ theme }) =>
theme.darkMode &&
css`
filter: invert() brightness(150%);
`}
`