2 files changed, 8 insertions, 4 deletions
diff --git a/packages/dev-tools-pages/ts/components/Base.tsx b/packages/dev-tools-pages/ts/components/Base.tsx
index a1b066d85..369a2525d 100644
--- a/packages/dev-tools-pages/ts/components/Base.tsx
+++ b/packages/dev-tools-pages/ts/components/Base.tsx
@@ -15,7 +15,7 @@ const Base: React.StatelessComponent<BaseProps> = props => (
     <ThemeContext.Provider value={props.context}>
         <ThemeProvider theme={props.context}>
             <React.Fragment>
-                <GlobalStyles />
+                <GlobalStyles colors={props.context.colors} />
                 <Header />
                 {props.children}
                 <Footer />
diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx
index 1a571c0cb..a77fb4eef 100644
--- a/packages/dev-tools-pages/ts/globalStyles.tsx
+++ b/packages/dev-tools-pages/ts/globalStyles.tsx
@@ -2,9 +2,13 @@ import hljsStyles from 'highlight.js/styles/github-gist.css';
 import { createGlobalStyle } from 'styled-components';
 import styledNormalize from 'styled-normalize';
 
+import { ContextInterface } from 'ts/context';
 import { media } from 'ts/variables';
 
-const GlobalStyles = createGlobalStyle`
+const GlobalStyles =
+    createGlobalStyle <
+    ContextInterface >
+    `
     ${styledNormalize}
     ${hljsStyles}
 
@@ -54,11 +58,11 @@ const GlobalStyles = createGlobalStyle`
     }
 
     a:not([class]) {
-        color: black;
+        color: ${props => props.colors.type_alt};
         text-decoration: none;
 
         &:hover {
-            color: black;
+            color: ${props => props.colors.type_alt};
         }
     }