WIP themeprovider

2 files changed, 51 insertions, 20 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>
+        </>
+    );
 };
diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx
index c0d683973..9e16c9411 100644
--- a/packages/website/ts/@next/components/text.tsx
+++ b/packages/website/ts/@next/components/text.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styled from 'styled-components';
+import styled, { withTheme } from 'styled-components';
 import { colors } from 'ts/style/colors';
 
 interface HeadingProps {
@@ -47,7 +47,7 @@ const PARAGRAPH_SIZES: ParagraphSizes = {
 };
 
 const StyledHeading = styled.h1<HeadingProps>`
-    color: ${props => props.color || colors.white};
+    color: ${props => props.color || props.theme.textColor};
     font-size: ${props => HEADING_SIZES[props.size || 'default']};
     font-weight: 300;
     margin-bottom: ${props => !props.noMargin && '30px'};
@@ -60,7 +60,6 @@ export const Heading: React.StatelessComponent<HeadingProps> = props => {
         children,
     } = props;
     const Component = StyledHeading.withComponent(asElement);
-
     return <Component {...props}>{children}</Component>;
 };
 
@@ -69,6 +68,7 @@ export const Paragraph = styled.p<ParagraphProps>`
     font-size: ${props => PARAGRAPH_SIZES[props.size || 'default']};
     margin-bottom: ${props => !props.noMargin && '30px'};
     line-height: 1.4;
-    color: ${props => `rgba(255, 255, 255, ${props.muted || 0.75})`};
+    color: ${props => props.color || props.theme.textColor};
+    opacity: ${props => props.muted || 0.75};
     text-align: ${props => props.center && 'center'};
 `;