From 82cecaef785bbfb3c827886e1617c61ed86e6db2 Mon Sep 17 00:00:00 2001
From: Lachlan Campbell <lachlanjc@hey.com>
Date: Wed, 16 Dec 2020 19:49:53 +0000
Subject: [PATCH 1/2] feat(color-modes): Default useColorModeMediaQuery to true

---
 packages/color-modes/src/index.tsx      |  6 +++---
 packages/docs/src/pages/color-modes.mdx | 11 ++++++-----
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/color-modes/src/index.tsx b/packages/color-modes/src/index.tsx
index 9165bdd3e..3298cab9c 100644
--- a/packages/color-modes/src/index.tsx
+++ b/packages/color-modes/src/index.tsx
@@ -63,7 +63,7 @@ const useColorModeState = (theme: Theme = {}) => {
   React.useEffect(() => {
     const stored = theme.useLocalStorage !== false && storage.get()
     document.body.classList.remove('theme-ui-' + stored)
-    if (!stored && theme.useColorSchemeMediaQuery) {
+    if (!stored && theme.useColorSchemeMediaQuery !== false) {
       const query = getMediaQuery()
       setMode(query)
       return
@@ -119,10 +119,10 @@ const applyColorMode = (theme: Theme, mode: string): Theme => {
   })
 }
 
-const BodyStyles = ({ theme }: { theme: Theme}) =>
+const BodyStyles = ({ theme }: { theme: Theme }) =>
   jsx(Global, {
     styles: () => {
-      return createColorStyles(theme);
+      return createColorStyles(theme)
     },
   })
 
diff --git a/packages/docs/src/pages/color-modes.mdx b/packages/docs/src/pages/color-modes.mdx
index 3bd3190ab..1d1ecefe5 100644
--- a/packages/docs/src/pages/color-modes.mdx
+++ b/packages/docs/src/pages/color-modes.mdx
@@ -80,8 +80,7 @@ npm i gatsby-plugin-theme-ui
 
 This plugin will look for a `src/gatsby-plugin-theme-ui/index.js` file to import and pass to the ThemeProvider.
 
-```js
-// gatsby-config.js
+```js filename=gatsby-config.js
 module.exports = {
   plugins: ['gatsby-plugin-theme-ui'],
 }
@@ -120,16 +119,18 @@ This will cause the colors to flash on initial page load.
 }
 ```
 
-### Initialize mode with `prefers-color-scheme` media query
+### Responding to the `prefers-color-scheme` media query
 
-To initialize a color mode based on the `prefers-color-scheme` media query, add the `useColorSchemeMediaQuery` flag to your theme.
+The `useColorSchemeMediaQuery` configuration option on the theme
+initializes a color mode based on the `prefers-color-scheme` media query.
 This will set the initial color mode to `dark` when `@media (prefers-color-scheme: dark)` matches,
 or `light` when `@media (prefers-color-scheme: light)` matches.
 If you do not have a color mode named `dark` or `light`, this will have no effect.
+This is enabled by default.
 
 ```js
 {
-  useColorSchemeMediaQuery: true,
+  useColorSchemeMediaQuery: false,
   colors: {
     text: '#000',
     background: '#fff',

From 50f5a58f1e34e822c050f94bf3a2d976acf17f31 Mon Sep 17 00:00:00 2001
From: Lachlan Campbell <lachlanjc@hey.com>
Date: Wed, 16 Dec 2020 19:51:58 +0000
Subject: [PATCH 2/2] chore(changelog): Update changelog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index efc551f53..92357a5a8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## v0.6.0 UNRELEASED
 
+- **BREAKING**: Default `useColorModeMediaQuery` to `true`. Issue #624, PR #1373
+
 ## v0.6.0-alpha.1
 
 - Switches from lodash.kebabCase to alternative package ([param-case](/blakeembrey/change-case/tree/master/packages/param-case)) per [official Lodash documentation](https://lodash.com/per-method-packages). PR #1304