Override styled components default theme

@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;
+			};
+		};
+	}
+}

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 {

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;
 	}
 `;
 

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;

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>
+			<DarkMode>
+				<Theme>
 					<GlobalStyles />
 					<Container>
 						<Nav />
 						<Component {...pageProps} />
 					</Container>
+				</Theme>
 			</DarkMode>
+		</>
 	);
 };