From 23324276a999962043a627ab915a6d6ce467f4b6 Mon Sep 17 00:00:00 2001
From: Lucas Stoebner <stoebnerl@gmail.com>
Date: Wed, 26 Oct 2022 10:12:23 +0200
Subject: [PATCH] :sparkles: Use existing dark themed components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Félix Legrelle <legrelle.f@gmail.com>
---
 site/source/Provider.tsx                      |  3 +-
 .../source/design-system/layout/Container.tsx |  8 ++--
 site/source/design-system/root.tsx            | 40 ++++++++++++++++++-
 site/source/design-system/theme.ts            | 10 +++++
 site/source/types/styled.d.ts                 |  1 +
 5 files changed, 54 insertions(+), 8 deletions(-)

diff --git a/site/source/Provider.tsx b/site/source/Provider.tsx
index bf4560017..f81131b02 100644
--- a/site/source/Provider.tsx
+++ b/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>
diff --git a/site/source/design-system/layout/Container.tsx b/site/source/design-system/layout/Container.tsx
index dac4bbf95..6e4f0ed48 100644
--- a/site/source/design-system/layout/Container.tsx
+++ b/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>
diff --git a/site/source/design-system/root.tsx b/site/source/design-system/root.tsx
index afaab492d..304fbe4fd 100644
--- a/site/source/design-system/root.tsx
+++ b/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
diff --git a/site/source/design-system/theme.ts b/site/source/design-system/theme.ts
index e7a535a47..ec6dc713d 100644
--- a/site/source/design-system/theme.ts
+++ b/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,
diff --git a/site/source/types/styled.d.ts b/site/source/types/styled.d.ts
index 1f5251b0c..5bc6df651 100644
--- a/site/source/types/styled.d.ts
+++ b/site/source/types/styled.d.ts
@@ -54,6 +54,7 @@ declare module 'styled-components' {
 				error: SmallPalette
 				success: SmallPalette
 				info: SmallPalette
+				dark: Palette
 			}
 		}