Completely fixed theme colors

@types/styled.d.ts

@@ -11,6 +11,7 @@ declare module 'styled-components' {
 				background: string;
 				text: string;
 			};
+			blue: string;
 		};
 	}
 }

components/Button.tsx

@@ -12,11 +12,8 @@ const Btn = styled.button<Props>`
 	display: inline;
 	cursor: pointer;
 	background: none;
-	color: ${({ dark, theme }) => (dark ? theme.colors.dark.text : theme.colors.light.text)};
+	color: var(--text);
-	border: ${({ variant, dark, theme }) =>
+	border: ${({ variant }) => (variant === 'outline' ? '2px solid var(--text)' : 'none')};
-		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')};
@@ -37,24 +34,14 @@ const Btn = styled.button<Props>`
 		bottom: 0;
 		right: 0;
 		z-index: -1;
-		background-color: ${({ variant, dark, theme }) =>
+		background-color: ${({ variant }) => (variant === 'outline' ? 'var(--text)' : 'inherit')};
-			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, theme }) =>
+		color: ${({ variant }) => (variant === 'outline' ? 'var(--background)' : 'inherit')};
-			variant === 'outline'
-				? dark
-					? theme.colors.dark.background
-					: theme.colors.light.background
-				: 'inherit'};
 	}
 
 	&:hover::before {

components/Card.tsx

@@ -21,7 +21,7 @@ const StyledCard = styled.div<{ dark: boolean; image: boolean }>`
 
 	&:hover {
 		& > div {
-			background: #1573ca;
+			background: ${({ theme }) => theme.colors.blue};
 			color: ${({ theme }) => theme.colors.dark.text};
 		}
 
@@ -32,7 +32,7 @@ const StyledCard = styled.div<{ dark: boolean; image: boolean }>`
 
 	& > div {
 		padding: 1rem 0rem;
-		background: ${({ dark, theme }) => (dark ? '#2f2f2f' : theme.colors.dark.text)};
+		background: var(--secondary-background);
 		display: grid;
 		row-gap: 0.5rem;
 

components/DarkMode.tsx

@@ -21,8 +21,19 @@ const reducer = (state: boolean, action: { type: string }) => {
 const DarkMode: FC = ({ children }) => {
 	const [dark, dispatch] = useReducer(reducer, false);
 	const toggle = () => {
-		if (dark) window.localStorage.setItem('theme', 'light');
+		const root = window.document.documentElement;
-		else window.localStorage.setItem('theme', 'dark');
+
+		if (dark) {
+			window.localStorage.setItem('theme', 'light');
+			root.style.setProperty('--background', '#F9F9F9');
+			root.style.setProperty('--secondary-background', 'white');
+			root.style.setProperty('--text', 'black');
+		} else {
+			window.localStorage.setItem('theme', 'dark');
+			root.style.setProperty('--background', '#262626');
+			root.style.setProperty('--secondary-background', '#2F2F2F');
+			root.style.setProperty('--text', 'white');
+		}
 
 		dispatch({ type: 'TOGGLE' });
 	};

components/GlobalStyles.tsx

@@ -32,9 +32,8 @@ const Global = createGlobalStyle<Props>`
 		}
 
 		&::selection {
-			background: ${({ dark, theme }) => (dark ? theme.colors.dark.text : theme.colors.light.text)};
+			background: var(--text);
-			color: ${({ dark, theme }) =>
+			color: var(--background);
-				dark ? theme.colors.dark.background : theme.colors.light.background};
 		}
   }
 
@@ -49,21 +48,17 @@ const Global = createGlobalStyle<Props>`
 
 	body {
 		margin: 0 0 100px;
-		background: ${({ dark, theme }) =>
+		background: var(--background);
-			dark ? theme.colors.dark.background : theme.colors.light.background};
+    color: var(--text); 
-    color: ${({ dark, theme }) => (dark ? theme.colors.dark.text : theme.colors.light.text)}; 
 		transition: color 250ms ease-in-out, background 250ms ease-in-out;
 		scroll-behavior: smooth;
 
 		#nprogress .bar {
-			background: ${({ dark, theme }) =>
+			background: var(--text) !important;
-				dark ? theme.colors.dark.text : theme.colors.light.text} !important;
 		}
 
 		#nprogress .peg {
-			box-shadow: 0 0 10px ${({ dark, theme }) =>
+			box-shadow: 0 0 10px var(--text), 0 0 5px var(--text) !important;
-				dark ? theme.colors.dark.text : theme.colors.light.text}, 0 0 5px ${({ dark, theme }) =>
-	dark ? theme.colors.dark.text : theme.colors.light.text} !important;
 		}
 	}
 
@@ -72,8 +67,7 @@ const Global = createGlobalStyle<Props>`
 	}
 	
 	body::-webkit-scrollbar-thumb {
-		background-color: ${({ dark, theme }) =>
+		background-color: var(--text) !important;
-			dark ? theme.colors.dark.text : theme.colors.light.text} !important;
 	}
 `;
 

components/Hero.tsx

@@ -42,7 +42,7 @@ const Wrapper = styled.div`
 	}
 
 	.blue {
-		color: #1573ca;
+		color: ${({ theme }) => theme.colors.blue};
 	}
 `;
 

components/Input.tsx

@@ -15,16 +15,16 @@ interface Props {
 const SmallField = styled.input<{ dark: boolean }>`
 	border: none;
 	padding: 1rem;
-	background: ${({ dark, theme }) => (dark ? '#2f2f2f' : theme.colors.dark.text)};
+	background: var(--secondary-background);
-	color: ${({ dark, theme }) => (dark ? theme.colors.dark.text : theme.colors.light.text)};
+	color: var(--text);
 `;
 
 const BigField = styled.textarea<{ dark: boolean }>`
 	resize: none;
 	border: none;
 	padding: 1rem;
-	background: ${({ dark, theme }) => (dark ? '#2f2f2f' : theme.colors.dark.text)};
+	background: var(--secondary-background);
-	color: ${({ dark, theme }) => (dark ? theme.colors.dark.text : theme.colors.light.text)};
+	color: var(--text);
 `;
 
 const Input: FC<Props & { className?: string }> = ({

components/MDXButton.tsx

@@ -15,7 +15,7 @@ const Btn = styled.button<Props>`
 	display: ${({ variant }) =>
 		['action', 'outline'].includes(variant as string) ? 'block' : 'inline'};
 	width: ${({ variant }) => (['action', 'outline'].includes(variant as string) ? '100%' : 'auto')};
-	background: ${({ variant }) => (variant === 'action' ? '#1573ca' : 'none')};
+	background: ${({ variant, theme }) => (variant === 'action' ? theme.colors.blue : 'none')};
 	color: ${({ variant, dark }) => (variant === 'action' ? 'white' : dark ? 'white' : 'black')};
 	border: ${({ variant, dark }) =>
 		variant === 'outline' ? `2px solid ${dark ? 'white' : 'black'}` : 'none'};

components/MobileNav.tsx

@@ -24,7 +24,7 @@ const Bar = styled.nav<StyledProps>`
 	transform: ${({ open }) => (open ? 'translateX(0%)' : 'translateX(100%)')};
 	width: 80%;
 	height: 100vh;
-	background: ${({ theme, dark }) => (dark ? theme.colors.dark.text : theme.colors.light.text)};
+	background: var(--text);
 	transition: transform 250ms ease-in-out;
 	display: grid;
 	grid-template-rows: 30% repeat(4, 50px);
@@ -45,8 +45,7 @@ const Bar = styled.nav<StyledProps>`
 		margin: 0rem 1rem;
 
 		button {
-			color: ${({ theme, dark }) =>
+			color: var(--text) !important;
-				dark ? theme.colors.light.text : theme.colors.dark.text} !important;
 		}
 	}
 `;

components/Theme.tsx

@@ -2,7 +2,6 @@ import { FC } from 'react';
 import { ThemeProvider, DefaultTheme } from 'styled-components';
 
 const Theme: FC = ({ children }) => {
-	// TODO: put theme colors in css custom properties and put common colors here.
 	const theme: DefaultTheme = {
 		colors: {
 			dark: {
@@ -12,7 +11,8 @@ const Theme: FC = ({ children }) => {
 			light: {
 				background: '#F9F9F9',
 				text: 'black'
-			}
+			},
+			blue: '#1573CA'
 		}
 	};
 

pages/_document.tsx

@@ -69,6 +69,18 @@ class Doc extends Document {
 									const root = document.documentElement;
 
 									root.style.setProperty('--theme', theme);
+									root.style.setProperty(
+										'--background',
+										theme === 'light' ? '#F9F9F9' : '#262626'
+									);
+									root.style.setProperty(
+										'--secondary-background',
+										theme === 'light' ? 'white' : '#2F2F2F'
+									);
+									root.style.setProperty(
+										'--text',
+										theme === 'light' ? 'black' : 'white'
+									);
 								})();
 							`
 						}}

pages/index.tsx

@@ -47,7 +47,7 @@ const Wrapper = styled.div`
 	}
 
 	.blue {
-		color: #1573ca;
+		color: ${({ theme }) => theme.colors.blue};
 
 		@media (max-width: 768px) {
 			margin-top: 0.5rem;