ThemeProvider (#677)

closes #655

server/pages/components/Header.js

@@ -1,12 +1,11 @@
 // @flow
 import styled from 'styled-components';
-import { color } from '../../../shared/styles/constants';
 
 const Header = styled.div`
   width: 100%;
   padding: 0 2em 2em;
   text-align: center;
-  background: ${color.slateLight};
+  background: ${props => props.theme.slateLight};
   margin-bottom: 2em;
 
   p {

server/pages/components/Layout.js

@@ -4,7 +4,6 @@ import { Helmet } from 'react-helmet';
 import { TopNavigation, BottomNavigation } from './Navigation';
 import Analytics from '../../../shared/components/Analytics';
 import globalStyles from '../../../shared/styles/globals';
-import { color } from '../../../shared/styles/constants';
 import prefetchTags from '../../utils/prefetchTags';
 
 export const title = 'Outline';
@@ -43,7 +42,6 @@ export default function Layout({ children }: Props) {
           <meta name="twitter:image" content={screenshotUrl} />
           <meta name="twitter:url" value={process.env.URL} />
 
-          <meta name="theme-color" content={color.primary} />
           <link
             rel="shortcut icon"
             type="image/png"

server/pages/components/Navigation.js

@@ -13,7 +13,6 @@ import {
   spectrumUrl,
   blogUrl,
 } from '../../../shared/utils/routeHelpers';
-import { color } from '../../../shared/styles/constants';
 
 function TopNavigation() {
   return (
@@ -65,16 +64,16 @@ function BottomNavigation() {
   );
 }
 
-const MenuLinkStyle = `
+const MenuLinkStyle = props => `
   font-size: 15px;
   font-weight: 500;
 
   a {
-    color: ${color.slate};
+    color: ${props.theme.slate};
   }
 
   a:hover {
-    color: ${color.slateDark};
+    color: ${props.theme.slateDark};
     text-decoration: underline;
   }
 `;
@@ -141,7 +140,7 @@ const Brand = styled.a`
   font-weight: 600;
   font-size: 20px;
   text-decoration: none;
-  color: ${color.black};
+  color: ${props => props.theme.black};
 `;
 
 export { TopNavigation, BottomNavigation };

server/pages/components/SigninButtons.js

@@ -5,7 +5,6 @@ import { signin } from '../../../shared/utils/routeHelpers';
 import Flex from '../../../shared/components/Flex';
 import GoogleLogo from '../../../shared/components/GoogleLogo';
 import SlackLogo from '../../../shared/components/SlackLogo';
-import { color } from '../../../shared/styles/constants';
 
 type Props = {
   lastSignedIn: string,
@@ -56,8 +55,8 @@ const Button = styled.a`
   display: inline-flex;
   align-items: center;
   padding: 10px 20px;
-  color: ${color.white};
-  background: ${color.black};
+  color: ${props => props.theme.white};
+  background: ${props => props.theme.black};
   border-radius: 4px;
   font-weight: 600;
   height: 56px;
@@ -65,7 +64,7 @@ const Button = styled.a`
 
 const LastLogin = styled.p`
   font-size: 12px;
-  color: ${color.slate};
+  color: ${props => props.theme.slate};
   padding-top: 4px;
 `;