feat(theming): allow null color scheme key to bypass ColorSchemeProvider local storage (#2032)

Author: jzempel

packages/theming/demo/stories/ColorSchemeProviderStory.tsx

@@ -57,12 +57,12 @@ const Content = ({
   };
 
   const handleClear = () => {
-    localStorage?.removeItem(colorSchemeKey);
+    localStorage?.removeItem(colorSchemeKey!);
     setInputValue('');
   };
 
   useEffect(() => {
-    setInputValue(localStorage?.getItem(colorSchemeKey) || '');
+    setInputValue(localStorage?.getItem(colorSchemeKey!) || '');
   }, [colorSchemeKey, colorScheme, isSystem, localStorage]);
 
   return (
@@ -75,7 +75,12 @@ const Content = ({
                 <Field.Label>
                   Local {!!colorSchemeKey && <Code>{colorSchemeKey}</Code>} storage
                 </Field.Label>
-                <Input placeholder="unspecified" readOnly value={inputValue} />
+                <Input
+                  disabled={colorSchemeKey === null ? true : undefined}
+                  placeholder={colorSchemeKey === null ? 'unused' : 'unspecified'}
+                  readOnly
+                  value={inputValue}
+                />
                 {!!inputValue && (
                   <Tooltip content={`Clear ${colorSchemeKey} storage`}>
                     <StyledIconButton focusInset onClick={handleClear} size="small">
@@ -98,7 +103,7 @@ const Content = ({
               placement="bottom-end"
               selectedItems={[{ value: isSystem ? 'system' : colorScheme }]}
             >
-              <ItemGroup type="radio">
+              <ItemGroup aria-label="appearance" type="radio">
                 <Item icon={<LightIcon />} value="light">
                   Light
                 </Item>

packages/theming/src/elements/ColorSchemeProvider.tsx

@@ -24,9 +24,13 @@ import {
 const mediaQuery =
   typeof window === 'undefined' ? undefined : window.matchMedia('(prefers-color-scheme: dark)');
 
-const useColorScheme = (initialState: ColorScheme, colorSchemeKey: string) => {
-  /* eslint-disable-next-line n/no-unsupported-features/node-builtins */
-  const localStorage = typeof window === 'undefined' ? undefined : window.localStorage;
+const useColorScheme = (
+  initialState: ColorScheme,
+  colorSchemeKey: IColorSchemeProviderProps['colorSchemeKey']
+) => {
+  const localStorage =
+    /* eslint-disable-next-line n/no-unsupported-features/node-builtins */
+    typeof window === 'undefined' || colorSchemeKey === null ? undefined : window.localStorage;
 
   const getState = useCallback((_state?: ColorScheme | null) => {
     const isSystem = _state === 'system' || _state === undefined || _state === null;
@@ -44,14 +48,14 @@ const useColorScheme = (initialState: ColorScheme, colorSchemeKey: string) => {
   const [state, setState] = useState<{
     isSystem: boolean;
     colorScheme: IGardenTheme['colors']['base'];
-  }>(getState((localStorage?.getItem(colorSchemeKey) as ColorScheme) || initialState));
+  }>(getState((localStorage?.getItem(colorSchemeKey!) as ColorScheme) || initialState));
 
   return {
     isSystem: state.isSystem,
     colorScheme: state.colorScheme,
     setColorScheme: (colorScheme: ColorScheme) => {
       setState(getState(colorScheme));
-      localStorage?.setItem(colorSchemeKey, colorScheme);
+      localStorage?.setItem(colorSchemeKey!, colorScheme);
     }
   };
 };

packages/theming/src/types/index.ts

@@ -226,9 +226,9 @@ export interface IColorSchemeProviderProps {
   initialColorScheme?: ColorScheme;
   /**
    * Specifies the key used to store the user's preferred color scheme in
-   * `localStorage`
+   * `localStorage` or `null` to bypass local storage persistence
    */
-  colorSchemeKey?: string;
+  colorSchemeKey?: string | null;
 }
 
 export interface IThemeProviderProps extends Partial<ThemeProviderProps<IGardenTheme>> {

packages/theming/src/utils/useColorScheme.spec.tsx

@@ -37,6 +37,21 @@ describe('useColorScheme', () => {
     });
   });
 
+  it('bypasses localStorage as expected', () => {
+    const Test = () => (
+      <ColorSchemeProvider colorSchemeKey={null}>
+        <ColorSchemeConsumer />
+      </ColorSchemeProvider>
+    );
+
+    expect(() => {
+      render(<Test />);
+    }).not.toThrow();
+
+    /* eslint-disable-next-line n/no-unsupported-features/node-builtins */
+    expect(window.localStorage.getItem('color-scheme')).toBeNull();
+  });
+
   it('sets the color scheme as expected', () => {
     const Test = () => (
       <ColorSchemeProvider initialColorScheme="light">