Disable dark mode by default, rename config option to darkMode (#2631)

* Disable dark mode by default, rename config option to `darkMode`

* Rebuild fixtures

__tests__/darkMode.test.js

@@ -45,7 +45,7 @@ test('user-defined dark mode variants do not stack', () => {
     })
 })
 
-test('generating dark mode variants uses the media strategy by default', () => {
+test('dark mode variants can be generated using the class strategy', () => {
   const input = `
     @variants dark {
       .text-red {
@@ -67,7 +67,7 @@ test('generating dark mode variants uses the media strategy by default', () => {
 
   expect.assertions(2)
 
-  return run(input).then((result) => {
+  return run(input, { darkMode: 'media' }).then((result) => {
     expect(result.css).toMatchCss(expected)
     expect(result.warnings().length).toBe(0)
   })
@@ -95,7 +95,7 @@ test('dark mode variants can be generated even when the user has their own plugi
 
   expect.assertions(2)
 
-  return run(input, { plugins: [] }).then((result) => {
+  return run(input, { darkMode: 'media', plugins: [] }).then((result) => {
     expect(result.css).toMatchCss(expected)
     expect(result.warnings().length).toBe(0)
   })
@@ -121,7 +121,7 @@ test('dark mode variants can be generated using the class strategy', () => {
 
   expect.assertions(2)
 
-  return run(input, { dark: 'class' }).then((result) => {
+  return run(input, { darkMode: 'class' }).then((result) => {
     expect(result.css).toMatchCss(expected)
     expect(result.warnings().length).toBe(0)
   })
@@ -150,6 +150,29 @@ test('dark mode variants can be disabled', () => {
   })
 })
 
+test('dark mode variants are disabled by default', () => {
+  const input = `
+    @variants dark {
+      .text-red {
+        color: red;
+      }
+    }
+  `
+
+  const expected = `
+    .text-red {
+      color: red;
+    }
+  `
+
+  expect.assertions(2)
+
+  return run(input).then((result) => {
+    expect(result.css).toMatchCss(expected)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
 test('dark mode variants stack with other variants', () => {
   const input = `
     @variants responsive, dark, hover, focus {
@@ -228,10 +251,12 @@ test('dark mode variants stack with other variants', () => {
 
   expect.assertions(2)
 
-  return run(input, { theme: { screens: { sm: '500px', lg: '800px' } } }).then((result) => {
-    expect(result.css).toMatchCss(expected)
-    expect(result.warnings().length).toBe(0)
-  })
+  return run(input, { darkMode: 'media', theme: { screens: { sm: '500px', lg: '800px' } } }).then(
+    (result) => {
+      expect(result.css).toMatchCss(expected)
+      expect(result.warnings().length).toBe(0)
+    }
+  )
 })
 
 test('dark mode variants stack with other variants when using the class strategy', () => {
@@ -324,7 +349,7 @@ test('dark mode variants stack with other variants when using the class strategy
 
   expect.assertions(2)
 
-  return run(input, { dark: 'class', theme: { screens: { sm: '500px', lg: '800px' } } }).then(
+  return run(input, { darkMode: 'class', theme: { screens: { sm: '500px', lg: '800px' } } }).then(
     (result) => {
       expect(result.css).toMatchCss(expected)
       expect(result.warnings().length).toBe(0)

src/lib/substituteVariantsAtRules.js

@@ -26,11 +26,11 @@ const defaultVariantGenerators = (config) => ({
   DEFAULT: generateVariantFunction(() => {}),
   dark: generateVariantFunction(
     ({ container, separator, modifySelectors }) => {
-      if (config.dark === false) {
+      if (config.darkMode === false) {
         return postcss.root()
       }
 
-      if (config.dark === 'media') {
+      if (config.darkMode === 'media') {
         const modified = modifySelectors(({ selector }) => {
           return buildSelectorVariant(selector, 'dark', separator, (message) => {
             throw container.error(message)
@@ -45,7 +45,7 @@ const defaultVariantGenerators = (config) => ({
         return container
       }
 
-      if (config.dark === 'class') {
+      if (config.darkMode === 'class') {
         const modified = modifySelectors(({ selector }) => {
           return buildSelectorVariant(selector, 'dark', separator, (message) => {
             throw container.error(message)

src/util/resolveConfig.js

@@ -222,7 +222,7 @@ export default function resolveConfig(configs) {
     },
     ...allConfigs,
     {
-      dark: 'media',
+      darkMode: false,
       prefix: '',
       important: false,
       separator: ':',

stubs/defaultConfig.stub.js

@@ -3,6 +3,7 @@ const colors = require('../colors')
 module.exports = {
   purge: [],
   presets: [],
+  darkMode: false,
   theme: {
     screens: {
       sm: '640px',

stubs/simpleConfig.stub.js

@@ -1,5 +1,6 @@
 module.exports = {
   purge: [],
+  darkMode: false,
   theme: {
     extend: {},
   },