ThemeProvider decorator not affecting stories in docs page

[hazem3500]

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]

Do you have a repro repo you can share?

Also, all of your storybook package versions should match. You can do this automatically (recommended) by:

• stable: npx sb upgrade
• prerelease: npx sb upgrade --prerelease

[hazem3500]

here is a reproduction repo: https://github.com/hazem3500/storybook-14477-repro

[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!

[hazem3500]

You're welcome 😄

[hazem3500]

I've tested this issue on version 6.3.0-rc.7 but it's still not working, is it supposed to be fixed in 6.3.0-rc.7 or will it be in another version?

[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]

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid.

Please open a new issue referencing this one if:

• this is still a problem in SB 7.x
• you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).