✨ Use existing dark themed components

Co-authored-by: Félix Legrelle <legrelle.f@gmail.com>

site/source/Provider.tsx

@@ -25,7 +25,6 @@ import { inIframe } from './utils'
 // ATInternet Tracking
 import { TrackingContext } from './ATInternetTracking'
 import { createTracker } from './ATInternetTracking/Tracker'
-import { DarkModeProvider } from '@/contexts/DarkModeContext'
 
 type SiteName = 'mon-entreprise' | 'infrance' | 'publicodes'
 
@@ -89,7 +88,7 @@ export default function Provider({
 									<SiteNameContext.Provider value={basename}>
 										<I18nextProvider i18n={i18next}>
 											<BrowserRouterProvider basename={basename}>
-												<DarkModeProvider>{children}</DarkModeProvider>
+												{children}
 											</BrowserRouterProvider>
 										</I18nextProvider>
 									</SiteNameContext.Provider>

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react'
 import styled, { DefaultTheme, ThemeProvider } from 'styled-components'
+import { useDarkMode } from '@/hooks/useDarkMode'
 
 const InnerContainer = styled.div`
 	margin-right: auto;
@@ -53,13 +54,12 @@ type ContainerProps = {
 
 export default function Container({
 	backgroundColor,
-	darkMode = false,
 	children,
 }: ContainerProps) {
+	const { darkMode } = useDarkMode()
+
 	return (
-		<ThemeProvider
-			theme={(theme) => ({ ...theme, darkMode: darkMode || theme.darkMode })}
-		>
+		<ThemeProvider theme={(theme) => ({ ...theme, darkMode })}>
 			<OuterOuterContainer>
 				<OuterContainer backgroundColor={backgroundColor}>
 					<InnerContainer>{children}</InnerContainer>

site/source/design-system/root.tsx

@@ -1,7 +1,14 @@
+import React from 'react'
 import isbot from 'isbot'
 import urssafTheme from '@/design-system/theme'
 import { ReactNode } from 'react'
-import { StyleSheetManager, ThemeProvider } from 'styled-components'
+import styled, {
+	StyleSheetManager,
+	ThemeProvider,
+	css,
+} from 'styled-components'
+import { useDarkMode } from '@/hooks/useDarkMode'
+import { DarkModeProvider } from '@/contexts/DarkModeContext'
 
 type SystemRootProps = {
 	children: ReactNode
@@ -12,9 +19,38 @@ const SystemRoot = ({ children }: SystemRootProps) => {
 
 	return (
 		<StyleSheetManager disableCSSOMInjection={isbot(userAgent)}>
-			<ThemeProvider theme={urssafTheme}>{children}</ThemeProvider>
+			<ThemeProvider theme={urssafTheme}>
+				<DarkModeProvider>
+					<Background>{children}</Background>
+				</DarkModeProvider>
+			</ThemeProvider>
 		</StyleSheetManager>
 	)
 }
 
+const Background: React.FC = ({ children }) => {
+	const { darkMode } = useDarkMode()
+
+	return <BackgroundStyle $darkMode={darkMode}>{children}</BackgroundStyle>
+}
+
+type BackgroundProps = {
+	$darkMode: boolean
+}
+
+const BackgroundStyle = styled.div<BackgroundProps>`
+	${({ $darkMode }) => {
+		if ($darkMode) {
+			return css`
+				background-color: ${({ theme }) => theme.colors.extended.dark[800]};
+				color: white;
+			`
+		} else {
+			return css`
+				background-color: white;
+			`
+		}
+	}}
+`
+
 export default SystemRoot

site/source/design-system/theme.ts

@@ -123,6 +123,16 @@ const baseTheme = {
 				500: '#D3AA00',
 				600: '#6B5700',
 			},
+			dark: {
+				100: '#e2e8f0',
+				200: '#cbd5e1',
+				300: '#94a3b8',
+				400: '#64748b',
+				500: '#475569',
+				600: '#334155',
+				700: '#1e293b',
+				800: '#0f172a',
+			},
 		},
 	},
 	darkMode: false,

site/source/types/styled.d.ts

@@ -54,6 +54,7 @@ declare module 'styled-components' {
 				error: SmallPalette
 				success: SmallPalette
 				info: SmallPalette
+				dark: Palette
 			}
 		}