Merge pull request #1373 from lachlanjc/default-color-scheme-true

feat(color-modes): Default useColorModeMediaQuery to true

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 ## v0.6.0 UNRELEASED
 
+- **BREAKING**: Default `useColorModeMediaQuery` to `true`. Issue #624, PR #1373
 - Extract objects with nested variant props. Issue #1357
 - Add ability for MDX styling, and fix mdx table align styles. Issue #654
 - Remove recursive default values from CSS custom properties. PR #1327

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)
     },
   })
 

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',