personal-website/components/GlobalStyles.tsx

import { FC, useContext } from 'react';
import { createGlobalStyle } from 'styled-components';
import { DarkModeContext } from '../components/DarkMode';

export interface Props {
	dark: boolean;
}

const Global = createGlobalStyle<Props>`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
		font-family: 'Source Code Pro', monospace;
		font-size: 17px;
  }

	body {
		background: ${({ dark }) => (dark ? '#262626' : '#F9F9F9')};
    color: ${({ dark }) => (dark ? 'white' : 'black')};
	}
`;

const GlobalStyles: FC = () => {
	const { dark } = useContext(DarkModeContext);

	return <Global dark={dark} />;
};

export default GlobalStyles;