diff --git a/src-docs/src/views/theme/consuming.tsx b/src-docs/src/views/theme/consuming.tsx
index 046ff07cfc89..14ae1a764855 100644
--- a/src-docs/src/views/theme/consuming.tsx
+++ b/src-docs/src/views/theme/consuming.tsx
@@ -18,6 +18,7 @@ export default () => {
         css={{
           background: euiTheme.colors.lightShade,
           padding: `calc(${euiTheme.size.base} * 2)`,
+          color: euiTheme.colors.text,
         }}
       >
         The padding of this box is created using <EuiCode>calc()</EuiCode>{' '}
diff --git a/src-docs/src/views/theme/consuming_hoc.tsx b/src-docs/src/views/theme/consuming_hoc.tsx
index 8dc9237774e3..b76e0a0a2e14 100644
--- a/src-docs/src/views/theme/consuming_hoc.tsx
+++ b/src-docs/src/views/theme/consuming_hoc.tsx
@@ -13,6 +13,7 @@ class Block extends React.Component<WithEuiThemeProps> {
       background: ${theme.euiTheme.colors.lightShade};
       padding: ${theme.euiTheme.size.xl};
       border-radius: ${theme.euiTheme.border.radius.medium};
+      color: ${theme.euiTheme.colors.text};
     `;
 
     return (
diff --git a/src-docs/src/views/theme/override_simple.tsx b/src-docs/src/views/theme/override_simple.tsx
index 93f1d2f364ea..0090871edaf7 100644
--- a/src-docs/src/views/theme/override_simple.tsx
+++ b/src-docs/src/views/theme/override_simple.tsx
@@ -11,6 +11,7 @@ const Box: FunctionComponent<{ children: ReactNode }> = ({ children }) => {
       css={{
         background: euiTheme.colors.lightShade,
         padding: euiTheme.size.xl,
+        color: euiTheme.colors.text,
       }}
     >
       <p>{children}</p>
diff --git a/src/theme_dark.scss b/src/theme_dark.scss
index aef1a964eae4..25d37b1f986f 100644
--- a/src/theme_dark.scss
+++ b/src/theme_dark.scss
@@ -4,6 +4,9 @@
 // Global styling
 @import 'global_styling/index';
 
+// The reset file makes use of variables and mixins
+@import 'global_styling/reset/index';
+
 // Components
 @import 'components/index';