1 files changed, 47 insertions, 16 deletions
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index a175c6901..6c29b3c43 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styled from 'styled-components';
+import styled, { ThemeProvider } from 'styled-components';
 
 import { Footer } from 'ts/@next/components/footer';
 import { Header } from 'ts/@next/components/header';
@@ -9,23 +9,54 @@ import { GlobalStyles } from 'ts/@next/constants/globalStyle';
 // Note(ez): We'll define the theme and provide it via a prop
 // e.g. theme dark/light/etc.
 interface Props {
+    theme?: 'dark' | 'light' | 'gray';
+    children: any;
+}
+
+interface GlobalThemes {
+    [key: string]: {
+        bgColor: string;
+        textColor: string;
+    }
+}
 
+const GLOBAL_THEMES: GlobalThemes = {
+    dark: {
+        bgColor: '#000000',
+        textColor: '#FFFFFF',
+    },
+    light: {
+        bgColor: '#FFFFFF',
+        textColor: '#FFFFFF',
+    },
+    gray: {
+        bgColor: '#e0e0e0',
+        textColor: '#FFFFFF',
+    },
 }
 
 export const SiteWrap: React.StatelessComponent<Props> = props => {
-  const { children } = props;
-
-  return (
-    <>
-        {/* GlobalStyles will be exposed the theme via provider,
-            same is true for all children of SiteWrap
-        */}
-        <GlobalStyles />
-        <Header />
-        <Main>
-            {children}
-        </Main>
-        <Footer/>
-    </>
-  );
+    const {
+        children,
+        theme = 'dark',
+    } = props;
+    const currentTheme = GLOBAL_THEMES[theme];
+
+    return (
+        <>
+            <ThemeProvider theme={currentTheme}>
+                <>
+                    <GlobalStyles />
+
+                    <Header />
+
+                    <Main>
+                        { children }
+                    </Main>
+
+                    <Footer/>
+                </>
+            </ThemeProvider>
+        </>
+    );
 };