ThemeProvider decorator not affecting stories in docs page

Describe the bug I have a decorator that toggles between color modes.

// withColorMode.tsx
import { useColorMode } from '@chakra-ui/react';
import React, { useEffect } from 'react';

export default (Story, { globals: { theme = 'light' } }) => {
    const { colorMode, setColorMode } = useColorMode();
    useEffect(() => {
    	if (colorMode !== theme) setColorMode(theme);
    }, [theme, colorMode]);
    return <Story />;
};

// preview.js

import React from 'react';

import { DesignSystemProvider } from '../src/providers';
import withColorMode from './decorators/withColorMode';

export const globalTypes = {
    theme: {
        name: 'Theme',
        description: 'Global theme for components',
        defaultValue: 'light',
        toolbar: {
            icon: 'circlehollow',
            items: ['light', 'dark'],
        },
    },
};

export const decorators = [
    withColorMode,
    (Story) => (
        <DesignSystemProvider>
                <Story />
        </DesignSystemProvider>
    ),
];

it works fine when viewing in canvas mode. but when I switch to the docs page it doesn’t work.

Expected behavior It should switch color mode on the docs page just like it does in canvas.

Screenshots

System

Environment Info:

  System:
    OS: Windows 10 10.0.18362
    CPU: (4) x64 Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz
  Binaries:
    Node: 14.8.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files\nodejs\yarn.CMD
    npm: 6.14.7 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 89.0.4389.114
    Edge: Spartan (44.18362.449.0)
  npmPackages:
    @storybook/addon-a11y: ^6.1.14 => 6.1.14 
    @storybook/addon-actions: ^6.1.18 => 6.1.21
    @storybook/addon-console: ^1.2.2 => 1.2.2
    @storybook/addon-essentials: ^6.1.21 => 6.1.21
    @storybook/addon-links: ^6.1.21 => 6.1.21
    @storybook/node-logger: ^6.1.11 => 6.2.1
    @storybook/preset-create-react-app: ^3.1.5 => 3.1.5
    @storybook/react: ^6.2.1 => 6.2.1

[shilman]

issue’s still open so i don’t think it’s going to happen in this release. we’re redoing how we render stories in docs mode in 7.0, so maybe that’s the best time to fix it.

in the meantime you can probably set docs: { inlineStories: false } in your global parameters as a workaround.

[shilman]

Thanks @hazem3500, I’ve reproduced with your repo. I’m going to merge some related PRs into 6.3-alpha next week and then see if it still has the problem. Thanks for the repro and for your patience!