Property renamed to useLocalStorage

Author: Eric Schaefer

packages/color-modes/src/custom-properties.js

@@ -13,6 +13,7 @@ const reservedKeys = {
   useCustomProperties: true,
   initialColorModeName: true,
   initialColorMode: true,
+  useLocalStorage: true,
 }
 
 const toPixel = (key, value) => {
@@ -86,6 +87,6 @@ export const createColorStyles = (theme = {}) => {
       ...styles,
       color: 'text',
       bg: 'background',
-    }
+    },
   })(theme)
 }

packages/color-modes/src/index.js

@@ -50,7 +50,7 @@ const useColorModeState = (theme = {}) => {
 
   // initialize state
   React.useEffect(() => {
-    const stored = !theme.noLocalStorageForColorMode && storage.get()
+    const stored = theme.useLocalStorage !== false && storage.get()
     document.body.classList.remove('theme-ui-' + stored)
     if (!stored && theme.useColorSchemeMediaQuery) {
       const query = getMediaQuery()
@@ -62,7 +62,7 @@ const useColorModeState = (theme = {}) => {
   }, [])
 
   React.useEffect(() => {
-    if (!mode || theme.noLocalStorageForColorMode) return
+    if (!mode || theme.useLocalStorage === false) return
     storage.set(mode)
   }, [mode])
 

packages/color-modes/test/index.js

@@ -209,7 +209,7 @@ test('initializes mode based on localStorage', () => {
   expect(mode).toBe('dark')
 })
 
-test('does not initialize mode based on localStorage if noLocalStorageForColorMode is set', () => {
+test('does not initialize mode based on localStorage if useLocalStorage is set to false', () => {
   window.localStorage.setItem(STORAGE_KEY, 'dark')
   let mode
   const Button = props => {
@@ -220,7 +220,7 @@ test('does not initialize mode based on localStorage if noLocalStorageForColorMo
   const tree = render(
     <ThemeProvider
       theme={{
-        noLocalStorageForColorMode: true,
+        useLocalStorage: false,
       }}>
       <ColorModeProvider>
         <Button />

packages/css/src/types.ts

@@ -559,9 +559,9 @@ export interface Theme {
   useBorderBox?: boolean
 
   /**
-   * If true, does not save color mode as a localStorage value.
+   * If false, does not save color mode as a localStorage value.
    */
-  noLocalStorageForColorMode?: boolean
+  useLocalStorage?: boolean
 
   /**
    * Define the colors that are available through this theme

packages/docs/src/pages/color-modes.mdx

@@ -156,7 +156,7 @@ modes on the same domain.
 
 ```js
 {
-  noLocalStorageForColorMode: true,
+  useLocalStorage: false,
   colors: {
     text: '#000',
     background: '#fff',

packages/docs/src/pages/theming.mdx

@@ -181,7 +181,7 @@ Flag | Default | Description
 `initialColorModeName` | `'default'` | The key used for the top-level color palette in `theme.colors`
 `useColorSchemeMediaQuery` | `false` | Initializes the color mode based on the `prefers-color-scheme` media query
 `useBorderBox` | `true` | Adds a global `box-sizing: border-box` style
-`noLocalStorageForColorMode` | `false` | Disables the color mode being loaded from `localStorage`
+`useLocalStorage` | `true` | Persists the color mode in `localStorage`
 
 ## Example Theme