diff --git a/site/source/Provider.tsx b/site/source/Provider.tsx
index 28150b980..f4a8567eb 100644
--- a/site/source/Provider.tsx
+++ b/site/source/Provider.tsx
@@ -22,6 +22,7 @@ import logo from '@/images/logo-monentreprise.svg'
import { TrackingContext } from './ATInternetTracking'
import { createTracker } from './ATInternetTracking/Tracker'
import { ServiceWorker } from './ServiceWorker'
+import { DarkModeProvider } from './contexts/DarkModeContext'
import * as safeLocalStorage from './storage/safeLocalStorage'
import { store } from './store'
import { inIframe } from './utils'
@@ -44,59 +45,62 @@ export default function Provider({
const { t } = useTranslation()
return (
-
-
-
-
- 
-
- Une erreur est survenue
-
- L'équipe technique mon-entreprise a été automatiquement prévenue.
-
-
- Vous pouvez également nous contacter directement à l'adresse{' '}
-
- contact@mon-entreprise.beta.gouv.fr
- {' '}
- si vous souhaitez partager une remarque. Veuillez nous excuser
- pour la gêne occasionnée.
-
-
- }
- >
- {!import.meta.env.SSR &&
- import.meta.env.MODE === 'production' &&
- 'serviceWorker' in navigator &&
- !inIframe() && }
-
-
-
-
-
-
-
- {children}
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ Une erreur est survenue
+
+ L'équipe technique mon-entreprise a été automatiquement
+ prévenue.
+
+
+ Vous pouvez également nous contacter directement à l'adresse{' '}
+
+ contact@mon-entreprise.beta.gouv.fr
+ {' '}
+ si vous souhaitez partager une remarque. Veuillez nous excuser
+ pour la gêne occasionnée.
+
+
+ }
+ >
+ {!import.meta.env.SSR &&
+ import.meta.env.MODE === 'production' &&
+ 'serviceWorker' in navigator &&
+ !inIframe() && }
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+
+
+
+
+
)
}
diff --git a/site/source/design-system/layout/Container.tsx b/site/source/design-system/layout/Container.tsx
index aece70862..eed2637a3 100644
--- a/site/source/design-system/layout/Container.tsx
+++ b/site/source/design-system/layout/Container.tsx
@@ -1,7 +1,5 @@
import { ReactNode } from 'react'
-import styled, { DefaultTheme, ThemeProvider } from 'styled-components'
-
-import { useDarkMode } from '@/hooks/useDarkMode'
+import styled, { DefaultTheme } from 'styled-components'
const InnerContainer = styled.div`
margin-right: auto;
@@ -57,16 +55,12 @@ export default function Container({
backgroundColor,
children,
}: ContainerProps) {
- const [darkMode] = useDarkMode()
-
return (
- ({ ...theme, darkMode })}>
-
-
- {children}
-
-
-
+
+
+ {children}
+
+
)
}
diff --git a/site/source/design-system/root.tsx b/site/source/design-system/root.tsx
index 36260b79e..9d4745531 100644
--- a/site/source/design-system/root.tsx
+++ b/site/source/design-system/root.tsx
@@ -6,8 +6,7 @@ import styled, {
css,
} from 'styled-components'
-import { DarkModeProvider } from '@/contexts/DarkModeContext'
-import urssafTheme from '@/design-system/theme'
+import urssafTheme, { getThemeColorsValues } from '@/design-system/theme'
import { useDarkMode } from '@/hooks/useDarkMode'
type SystemRootProps = {
@@ -17,12 +16,17 @@ type SystemRootProps = {
const SystemRoot = ({ children }: SystemRootProps) => {
const userAgent = typeof navigator !== 'undefined' && navigator.userAgent
+ const [isDarkMode] = useDarkMode()
+
+ const darkModeColorValues = getThemeColorsValues(
+ isDarkMode,
+ urssafTheme
+ ) as object
+
return (
-
-
- {children}
-
+
+ {children}
)
diff --git a/site/source/design-system/theme.ts b/site/source/design-system/theme.ts
index 7f905bdd9..6bcf3cc5f 100644
--- a/site/source/design-system/theme.ts
+++ b/site/source/design-system/theme.ts
@@ -183,6 +183,31 @@ const baseTheme = {
},
}
+const themeColorsDefaultValues = {
+ theme: {
+ textColorDefault: baseTheme.colors.bases.primary[800],
+ backgroundColorLight: baseTheme.colors.extended.grey[100],
+ backgroundColorDark: baseTheme.colors.bases.primary[800],
+ },
+}
+
+export const getThemeColorsValues = (
+ isDarkMode: boolean,
+ theme: typeof baseTheme
+) => {
+ if (isDarkMode) {
+ return {
+ mode: {
+ textColorDefault: theme.colors.bases.primary[100],
+ backgroundColorLight: theme.colors.bases.primary[800],
+ backgroundColorDark: baseTheme.colors.extended.grey[100],
+ },
+ }
+ }
+
+ return themeColorsDefaultValues
+}
+
// We use the Grid from material-ui, we need to uniformise
// breakpoints and spacing with the Urssaf design system
export type SpacingKey = keyof typeof baseTheme.breakpointsWidth
@@ -193,6 +218,14 @@ const breakpoints = Object.fromEntries(
])
) as Record
+const baseThemeWithThemeColors = {
+ ...baseTheme,
+ colors: {
+ ...baseTheme.colors,
+ ...themeColorsDefaultValues,
+ },
+}
+
const theme: DefaultTheme = {
breakpoints: {
values: {
@@ -202,7 +235,7 @@ const theme: DefaultTheme = {
},
spacing: Object.values(baseTheme.spacings),
- ...baseTheme,
+ ...baseThemeWithThemeColors,
}
export default theme
diff --git a/site/source/pages/Landing/Landing.tsx b/site/source/pages/Landing/Landing.tsx
index 649bf22fe..7ab06e9a6 100644
--- a/site/source/pages/Landing/Landing.tsx
+++ b/site/source/pages/Landing/Landing.tsx
@@ -51,10 +51,7 @@ export default function Landing() {
- theme.colors.bases.primary[600]}
- >
+ theme.colors.bases.primary[600]}>
@@ -188,3 +185,7 @@ const HideOnMobile = styled(Grid)`
display: block;
}
`
+
+const SearchContainer = styled(Container)`
+ background: ${({ theme }) => theme.colors.theme.backgroundColorDark};
+`
diff --git a/site/source/pages/Landing/SearchOrCreate.tsx b/site/source/pages/Landing/SearchOrCreate.tsx
index 41992f057..5702fc908 100644
--- a/site/source/pages/Landing/SearchOrCreate.tsx
+++ b/site/source/pages/Landing/SearchOrCreate.tsx
@@ -2,7 +2,6 @@ import { useCallback, useEffect } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import { useDispatch, useSelector } from 'react-redux'
import { generatePath, useNavigate } from 'react-router-dom'
-import { ThemeProvider } from 'styled-components'
import { resetCompany } from '@/actions/companyActions'
import {
@@ -35,59 +34,57 @@ export default function SearchOrCreate() {
const { t } = useTranslation()
return (
- ({ ...theme, darkMode: true })}>
-
-
- {companySIREN ? (
- <>
- Votre entreprise
-
-
-
-
-
-
-
- ) : (
- <>
-
- Rechercher votre entreprise{' '}
-
-
-
-
+
+
+ {companySIREN ? (
+ <>
+ Votre entreprise
+
+
+
-
- )}
-
+
+
+
+ ) : (
+ <>
+
+ Rechercher votre entreprise{' '}
+
+
+
+
+
+
+ )}
-
+
)
}
diff --git a/site/source/types/styled.d.ts b/site/source/types/styled.d.ts
index 12434cce3..c5b296c23 100644
--- a/site/source/types/styled.d.ts
+++ b/site/source/types/styled.d.ts
@@ -57,6 +57,12 @@ declare module 'styled-components' {
info: SmallPalette
dark: Palette
}
+
+ theme: {
+ textColorDefault: string
+ backgroundColorLight: string
+ backgroundColorDark: string
+ }
}
spacings: {