diff --git a/__tests__/mergeConfigWithDefaults.test.js b/__tests__/mergeConfigWithDefaults.test.js
index f92bc94942ca..aaf5554a1470 100644
--- a/__tests__/mergeConfigWithDefaults.test.js
+++ b/__tests__/mergeConfigWithDefaults.test.js
@@ -300,3 +300,166 @@ test('missing top level keys are pulled from the default config', () => {
     },
   })
 })
+
+test('user colors replace background, text, and border colors', () => {
+  const userConfig = {
+    theme: {
+      colors: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+    },
+  }
+
+  const defaultConfig = {
+    prefix: '-',
+    important: false,
+    separator: ':',
+    theme: {
+      colors: {
+        cyan: 'cyan',
+        magenta: 'magenta',
+        yellow: 'yellow',
+      },
+      backgroundColors: {
+        cyan: 'cyan',
+        magenta: 'magenta',
+        yellow: 'yellow',
+      },
+      textColors: {
+        cyan: 'cyan',
+        magenta: 'magenta',
+        yellow: 'yellow',
+      },
+      borderColors: {
+        cyan: 'cyan',
+        magenta: 'magenta',
+        yellow: 'yellow',
+      },
+    },
+    variants: {
+      backgroundColors: ['responsive'],
+      textColors: ['responsive'],
+      borderColors: ['responsive'],
+    },
+  }
+
+  const result = mergeConfigWithDefaults(userConfig, defaultConfig)
+
+  expect(result).toEqual({
+    prefix: '-',
+    important: false,
+    separator: ':',
+    theme: {
+      colors: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+      backgroundColors: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+      textColors: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+      borderColors: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+    },
+    variants: {
+      backgroundColors: ['responsive'],
+      textColors: ['responsive'],
+      borderColors: ['responsive'],
+    },
+  })
+})
+
+test('user background, text, and border colors replace user colors', () => {
+  const userConfig = {
+    theme: {
+      colors: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+      backgroundColors: {
+        cyan: 'cyan',
+      },
+      textColors: {
+        magenta: 'magenta',
+      },
+      borderColors: {
+        yellow: 'yellow',
+      },
+    },
+  }
+
+  const defaultConfig = {
+    prefix: '-',
+    important: false,
+    separator: ':',
+    theme: {
+      colors: {
+        cyan: 'cyan',
+        magenta: 'magenta',
+        yellow: 'yellow',
+      },
+      backgroundColors: {
+        cyan: 'cyan',
+        magenta: 'magenta',
+        yellow: 'yellow',
+      },
+      textColors: {
+        cyan: 'cyan',
+        magenta: 'magenta',
+        yellow: 'yellow',
+      },
+      borderColors: {
+        cyan: 'cyan',
+        magenta: 'magenta',
+        yellow: 'yellow',
+      },
+    },
+    variants: {
+      backgroundColors: ['responsive'],
+      textColors: ['responsive'],
+      borderColors: ['responsive'],
+    },
+  }
+
+  const result = mergeConfigWithDefaults(userConfig, defaultConfig)
+
+  expect(result).toEqual({
+    prefix: '-',
+    important: false,
+    separator: ':',
+    theme: {
+      colors: {
+        red: 'red',
+        green: 'green',
+        blue: 'blue',
+      },
+      backgroundColors: {
+        cyan: 'cyan',
+      },
+      textColors: {
+        magenta: 'magenta',
+      },
+      borderColors: {
+        yellow: 'yellow',
+      },
+    },
+    variants: {
+      backgroundColors: ['responsive'],
+      textColors: ['responsive'],
+      borderColors: ['responsive'],
+    },
+  })
+})
diff --git a/src/util/mergeConfigWithDefaults.js b/src/util/mergeConfigWithDefaults.js
index fac9dbb32beb..094e0037bfcb 100644
--- a/src/util/mergeConfigWithDefaults.js
+++ b/src/util/mergeConfigWithDefaults.js
@@ -3,7 +3,12 @@ import _ from 'lodash'
 export default function(userConfig, defaultConfig) {
   return _.defaults(
     {
-      theme: _.defaults(userConfig.theme, defaultConfig.theme),
+      theme: _.defaults(userConfig.theme, {
+        ...defaultConfig.theme,
+        backgroundColors: _.get(userConfig.theme, 'colors', defaultConfig.theme.backgroundColors),
+        textColors: _.get(userConfig.theme, 'colors', defaultConfig.theme.textColors),
+        borderColors: _.get(userConfig.theme, 'colors', defaultConfig.theme.borderColors),
+      }),
       variants: _.defaults(userConfig.variants, defaultConfig.variants),
     },
     userConfig,