Adds themed footer styling

2 files changed, 16 insertions, 4 deletions

diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx
index 75944c910..defc4ba81 100644
--- a/packages/website/ts/@next/components/footer.tsx
+++ b/packages/website/ts/@next/components/footer.tsx
@@ -111,11 +111,15 @@ const LinkList = (props: LinkListProps) => (
 const FooterSection = styled.footer`
     padding: 40px 30px 30px 30px;
     margin-top: 30px;
-    background-color: #181818;
+    background-color: ${props => props.theme.footerBg};
 `;
 
 const FooterWrap = styled(FooterSection)`
-    color: ${colors.white};
+    color: ${props => props.theme.footerColor};
+
+    path {
+        fill: ${props => props.theme.footerColor};
+    }
 
     @media (min-width: ${BREAKPOINTS.mobile}) {
         height: 350px;
@@ -140,10 +144,11 @@ const FooterSectionWrap = styled(FooterColumn)`
 `;
 
 const RowHeading = styled.h3`
-    color: ${colors.white};
+    color: inherit;
     font-weight: 700;
     font-size: 16px;
     margin-bottom: 1.25em;
+    opacity: 0.75;
 `;
 
 const List = styled.ul`
@@ -153,7 +158,8 @@ const List = styled.ul`
 `;
 
 const Link = styled(ReactRouterLink)`
-    color: rgba(255, 255, 255, 0.5);
+    color: inherit;
+    opacity: 0.5;
     display: block;
     font-size: 16px;
     line-height: 20px;
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index eb2569f3d..fab917eeb 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -34,6 +34,8 @@ const GLOBAL_THEMES: ThemeInterface = {
         dropdownButtonBg: '#003831',
         dropdownColor: '#FFFFFF',
         headerButtonBg: '#00AE99',
+        footerBg: '#181818',
+        footerColor: '#FFFFFF',
     },
     light: {
         bgColor: '#FFFFFF',
@@ -44,6 +46,8 @@ const GLOBAL_THEMES: ThemeInterface = {
         dropdownColor: '#003831',
         dropdownBorderColor: '#E4E4E4',
         headerButtonBg: '#003831',
+        footerBg: '#F2F2F2',
+        footerColor: '#000000',
     },
     gray: {
         bgColor: '#e0e0e0',
@@ -53,6 +57,8 @@ const GLOBAL_THEMES: ThemeInterface = {
         dropdownButtonBg: '#F3F6F4',
         dropdownColor: '#003831',
         headerButtonBg: '#003831',
+        footerBg: '#181818',
+        footerColor: '#FFFFFF',
     },
 };