Merge pull request #782 from eschaefer/no-localStorage-option

Option to not use localStorage to persist the color mode

Author: jxnblk

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 = 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) return
+    if (!mode || theme.useLocalStorage === false) return
     storage.set(mode)
   }, [mode])
 

packages/color-modes/test/index.js

@@ -209,6 +209,27 @@ test('initializes mode based on localStorage', () => {
   expect(mode).toBe('dark')
 })
 
+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 => {
+    const [colorMode, setMode] = useColorMode()
+    mode = colorMode
+    return <button children="test" />
+  }
+  const tree = render(
+    <ThemeProvider
+      theme={{
+        useLocalStorage: false,
+      }}>
+      <ColorModeProvider>
+        <Button />
+      </ColorModeProvider>
+    </ThemeProvider>
+  )
+  expect(mode).toBe('default')
+})
+
 test('retains initial context', () => {
   let context
   const Consumer = props => {

packages/css/src/types.ts

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

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

@@ -148,3 +148,22 @@ If you do not have a color mode named `dark` or `light`, this will have no effec
 }
 ```
 
+### Disable persisting color mode on `localStorage`
+
+To disable `localStorage` add the `useLocalStorage: false` flag to your theme.
+
+```js
+{
+  useLocalStorage: false,
+  colors: {
+    text: '#000',
+    background: '#fff',
+    modes: {
+      dark: {
+        text: '#fff',
+        background: '#000',
+      }
+    }
+  }
+}
+```

packages/docs/src/pages/theming.mdx

@@ -175,6 +175,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
+`useLocalStorage` | `true` | Persists the color mode in `localStorage`
 
 ## Example Theme