From 065413eaf59fd75d04f7f52a92cc6ed521bc9742 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Thu, 7 Jan 2021 14:45:14 +0100
Subject: [PATCH] Override styled components default theme

---
 @types/styled.d.ts          | 16 +++++++++++++++
 components/Button.tsx       | 39 ++++++++++++++++++++++++-------------
 components/GlobalStyles.tsx |  9 +++++----
 components/Theme.tsx        | 21 ++++++++++++++++++++
 pages/_app.tsx              | 19 +++++++++++-------
 5 files changed, 80 insertions(+), 24 deletions(-)
 create mode 100644 @types/styled.d.ts
 create mode 100644 components/Theme.tsx

diff --git a/@types/styled.d.ts b/@types/styled.d.ts
new file mode 100644
index 0000000..1c1f831
--- /dev/null
+++ b/@types/styled.d.ts
@@ -0,0 +1,16 @@
+import 'styled-components';
+
+declare module 'styled-components' {
+	export interface DefaultTheme {
+		colors: {
+			dark: {
+				background: string;
+				text: string;
+			};
+			light: {
+				background: string;
+				text: string;
+			};
+		};
+	}
+}
diff --git a/components/Button.tsx b/components/Button.tsx
index 8ccca9d..b36905e 100644
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -1,8 +1,7 @@
 import { FC, useContext } from 'react';
 import { DarkModeContext } from '../components/DarkMode';
 import styled from 'styled-components';
-
-export interface Props {
+interface Props {
 	variant?: 'outline' | 'text' | 'action';
 	onClick?: () => void;
 	dark?: boolean;
@@ -14,16 +13,18 @@ const Btn = styled.button<Props>`
 	cursor: pointer;
 	background: none;
 	outline: none;
-	color: ${({ dark }) => (dark ? 'white' : 'black')};
+	color: ${({ dark, theme }) => (dark ? theme.colors.dark.text : theme.colors.light.text)};
 	padding: 1rem;
-	border: ${({ variant, dark }) =>
-		variant === 'outline' ? `2px solid ${dark ? 'white' : 'black'}` : 'none'};
+	border: ${({ variant, dark, theme }) =>
+		variant === 'outline'
+			? `2px solid ${dark ? theme.colors.dark.text : theme.colors.light.text}`
+			: 'none'};
 	font-weight: bold;
 	font-size: ${({ variant }) => (variant === 'outline' ? '1.05rem' : 'inherit')};
 	text-transform: ${({ variant }) => (variant === 'outline' ? 'uppercase' : 'inherit')};
 	padding: ${({ variant }) => (variant === 'outline' ? '.5rem 1rem' : '0rem')};
 
-	transition: color 300ms ease-in-out;
+	transition: color 250ms ease-in-out;
 	z-index: 1;
 
 	&::before {
@@ -34,21 +35,33 @@ const Btn = styled.button<Props>`
 		bottom: 0;
 		right: 0;
 		z-index: -1;
-		background-color: ${({ variant, dark }) =>
-			variant === 'outline' ? (dark ? 'white' : 'black') : 'inherit'};
-		transition: transform 300ms ease-in-out;
+		background-color: ${({ variant, dark, theme }) =>
+			variant === 'outline'
+				? dark
+					? theme.colors.dark.text
+					: theme.colors.light.text
+				: 'inherit'};
+		transition: transform 250ms ease-in-out;
 		transform: scaleX(0);
 		transform-origin: left;
 	}
 
 	&:hover {
-		color: ${({ variant, dark }) =>
-			variant === 'outline' ? (dark ? '#262626' : '#F9F9F9') : 'inherit'};
+		color: ${({ variant, dark, theme }) =>
+			variant === 'outline'
+				? dark
+					? theme.colors.dark.background
+					: theme.colors.light.background
+				: 'inherit'};
 	}
 
 	&:focus {
-		color: ${({ variant, dark }) =>
-			variant === 'outline' ? (dark ? '#262626' : '#F9F9F9') : 'inherit'};
+		color: ${({ variant, dark, theme }) =>
+			variant === 'outline'
+				? dark
+					? theme.colors.dark.background
+					: theme.colors.light.background
+				: 'inherit'};
 	}
 
 	&:hover::before {
diff --git a/components/GlobalStyles.tsx b/components/GlobalStyles.tsx
index afe3a64..6bacfdd 100644
--- a/components/GlobalStyles.tsx
+++ b/components/GlobalStyles.tsx
@@ -1,8 +1,7 @@
 import { FC, useContext } from 'react';
 import { createGlobalStyle } from 'styled-components';
 import { DarkModeContext } from '../components/DarkMode';
-
-export interface Props {
+interface Props {
 	dark: boolean;
 }
 
@@ -16,8 +15,10 @@ const Global = createGlobalStyle<Props>`
   }
 
 	body {
-		background: ${({ dark }) => (dark ? '#262626' : '#F9F9F9')};
-    color: ${({ dark }) => (dark ? 'white' : 'black')};
+		background: ${({ dark, theme }) =>
+			dark ? theme.colors.dark.background : theme.colors.light.background};
+    color: ${({ dark, theme }) => (dark ? theme.colors.dark.text : theme.colors.light.text)};
+		transition: color 250ms ease-in-out, background 250ms ease-in-out;
 	}
 `;
 
diff --git a/components/Theme.tsx b/components/Theme.tsx
new file mode 100644
index 0000000..c822ba5
--- /dev/null
+++ b/components/Theme.tsx
@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { ThemeProvider, DefaultTheme } from 'styled-components';
+
+const Theme: FC = ({ children }) => {
+	const theme: DefaultTheme = {
+		colors: {
+			dark: {
+				background: '#262626',
+				text: 'white'
+			},
+			light: {
+				background: '#F9F9F9',
+				text: 'black'
+			}
+		}
+	};
+
+	return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+};
+
+export default Theme;
diff --git a/pages/_app.tsx b/pages/_app.tsx
index d1beca1..63bb957 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -4,10 +4,11 @@ import Nav from '../components/Nav';
 import DarkMode from '../components/DarkMode';
 import Container from '../components/Container';
 import GlobalStyles from '../components/GlobalStyles';
+import Theme from '../components/Theme';
 
 const App = ({ Component, pageProps }: AppProps) => {
 	return (
-		<DarkMode>
+		<>
 			<Head>
 				<link rel='preconnect' href='https://fonts.gstatic.com' />
 				<link
@@ -16,12 +17,16 @@ const App = ({ Component, pageProps }: AppProps) => {
 				/>
 				<title>Hazem Krimi</title>
 			</Head>
-			<GlobalStyles />
-			<Container>
-				<Nav />
-				<Component {...pageProps} />
-			</Container>
-		</DarkMode>
+			<DarkMode>
+				<Theme>
+					<GlobalStyles />
+					<Container>
+						<Nav />
+						<Component {...pageProps} />
+					</Container>
+				</Theme>
+			</DarkMode>
+		</>
 	);
 };