Override styled components default theme

This commit is contained in:
Hazem Krimi
2021-01-07 14:45:14 +01:00
parent 0eaf23ad60
commit 065413eaf5
5 changed files with 80 additions and 24 deletions
+5 -4
View File
@@ -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;
}
`;