WIP themeprovider

1 files changed, 14 insertions, 9 deletions

diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx
index d33a8e68c..72c8a933e 100644
--- a/packages/website/ts/@next/constants/globalStyle.tsx
+++ b/packages/website/ts/@next/constants/globalStyle.tsx
@@ -1,11 +1,16 @@
-import {createGlobalStyle} from 'styled-components';
+import { withTheme, createGlobalStyle } from 'styled-components';
 import {cssReset} from 'ts/@next/constants/cssReset';
 import {colors} from 'ts/style/colors';
 
-// Not sure if cssReset is already imported into index.tsx Also: currently
-// createglobalStyle from styled-components is throwing a warning about how
-// there's not typing exported from styled-comps
-const GlobalStyles = createGlobalStyle `
+
+interface GlobalStyle {
+    theme: {
+        bgColor: string;
+        textColor: string;
+    }
+}
+
+const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
     ${cssReset};
 
     @font-face {
@@ -24,13 +29,13 @@ const GlobalStyles = createGlobalStyle `
 
     html {
         font-size: 18px;
-        background-color: ${colors.backgroundBlack};
+        background-color: ${props => props.theme.bgColor};
     }
 
     body {
         font-family: 'Formular', sans-serif !important;
         -webkit-font-smoothing: antialiased;
-        color: ${colors.white};
+        color: ${props => props.theme.textColor};
     }
 
     .visuallyHidden {
@@ -58,6 +63,6 @@ const GlobalStyles = createGlobalStyle `
         color: inherit;
         text-decoration: none;
     }
-`;
+`);
 
-export {GlobalStyles};
+export { GlobalStyles };