diff --git a/src/components/buttons/flat-button/flat-button.js b/src/components/buttons/flat-button/flat-button.js
index 3f31a14a52..8e4c36a975 100644
--- a/src/components/buttons/flat-button/flat-button.js
+++ b/src/components/buttons/flat-button/flat-button.js
@@ -16,12 +16,19 @@ const getIconElement = props => {
   });
 };
 
-const getTextColor = (tone, isHover = false) => {
+const getTextColor = (tone, isHover = false, theme) => {
+  const overwrittenVars = {
+    ...vars,
+    ...theme,
+  };
+
   switch (tone) {
     case 'primary':
-      return isHover ? vars.colorPrimary25 : vars.colorPrimary;
+      return isHover
+        ? overwrittenVars.colorPrimary25
+        : overwrittenVars.colorPrimary;
     case 'secondary':
-      return vars.colorSolid;
+      return overwrittenVars.colorSolid;
     default:
       return 'inherit';
   }
@@ -40,7 +47,7 @@ export const FlatButton = props => {
       label={props.label}
       onClick={props.onClick}
       isDisabled={props.isDisabled}
-      css={css`
+      css={theme => css`
         display: flex;
         align-items: center;
         font-size: 1rem;
@@ -48,16 +55,17 @@ export const FlatButton = props => {
         background: none;
         padding: 0;
         min-height: initial;
+
         p {
           color: ${props.isDisabled
             ? vars.colorNeutral
-            : getTextColor(props.tone)};
+            : getTextColor(props.tone, false, theme)};
         }
 
         svg * {
           fill: ${props.isDisabled
             ? vars.colorNeutral
-            : getTextColor(props.tone, false)};
+            : getTextColor(props.tone, false, theme)};
         }
 
         &:hover,
@@ -65,13 +73,13 @@ export const FlatButton = props => {
           p {
             color: ${props.isDisabled
               ? vars.colorNeutral
-              : getTextColor(props.tone, true)};
+              : getTextColor(props.tone, true, theme)};
           }
 
           svg * {
             fill: ${props.isDisabled
               ? vars.colorNeutral
-              : getTextColor(props.tone, true)};
+              : getTextColor(props.tone, true, theme)};
           }
         }
       `}
diff --git a/src/components/buttons/flat-button/flat-button.visualroute.js b/src/components/buttons/flat-button/flat-button.visualroute.js
index 1ac7b55b82..b05b32e663 100644
--- a/src/components/buttons/flat-button/flat-button.visualroute.js
+++ b/src/components/buttons/flat-button/flat-button.visualroute.js
@@ -1,10 +1,11 @@
 import React from 'react';
+import { ThemeProvider } from 'emotion-theming';
 import { FlatButton, InformationIcon } from 'ui-kit';
 import { Suite, Spec } from '../../../../test/percy';
 
 export const routePath = '/flat-button';
 
-export const component = () => (
+export const component = ({ themes }) => (
   <Suite>
     <Spec label="regular">
       <FlatButton tone="primary" label="A label text" onClick={() => {}} />
@@ -42,5 +43,15 @@ export const component = () => (
         icon={<InformationIcon />}
       />
     </Spec>
+    <ThemeProvider theme={themes.darkTheme}>
+      <Spec label="secondary">
+        <FlatButton
+          tone="secondary"
+          label="Inverted"
+          onClick={() => {}}
+          icon={<InformationIcon />}
+        />
+      </Spec>
+    </ThemeProvider>
   </Suite>
 );