Theme with JSX Provider does not work | Storybook | Page 1

autumn notch Oct 16, 2023, 1:33 AM

#

Following the documentation https://storybook.js.org/blog/introducing-theme-switcher-addon/ here but using withThemeFromJSXProvider. There is no theme button rendering in storybook.

Storybook Blog

Introducing the Theme Switcher addon

September 2023 Storybook update

#

Here is preview.ts

import type { Preview } from '@storybook/react';
import { withThemeFromJSXProvider } from '@storybook/addon-themes';
import '../src/index.css'
import { ThemeProvider } from '@mui/system';
import { lightTheme, darkTheme } from '../src/theme';

const preview: Preview = {
    parameters: {
        actions: { argTypesRegex: '^on[A-Z].*' },
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/,
            },
        },
    },
    decorators: [
        withThemeFromJSXProvider({
            themes: {
              light: lightTheme,
              dark: darkTheme,
            },
            defaultTheme: 'light',
            Provider: ThemeProvider,
            // GlobalStyles: CssBaseline,
          }),
    ]
};

export default preview;

vale furnace Oct 18, 2023, 7:54 AM

#

Hey @autumn notch, thanks for formatting this so nicely!

@sullen lynx – can you help?

autumn notch Oct 18, 2023, 2:38 PM

#

Thanks for the reply @vale furnace ! Wanted to note, my story file is unchanged, so maybe I am missing something there. Happy to share that file if it would be useful.

#

import type { Meta, StoryObj } from '@storybook/react';
import { Button } from '../../components';
import { Check, CloseSharp } from '@mui/icons-material';

const meta = {
    title: 'Components/Button',
    component: Button,
    tags: ['autodocs'],
    parameters: {
        layout: 'centered',
    },
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Text: Story = {
    args: {
        title: 'Click me!',
        type: 'button',
        color: 'secondary',
        loading: false,
        disabled: false,
    },
};

Here it is just in case.

sullen lynx Oct 18, 2023, 2:55 PM

#

Hey @autumn notch, have you registered the addon in your main.ts file?

autumn notch Oct 18, 2023, 3:03 PM

#

Thank you @sullen lynx . No I had not done that. Doing that allows the theme button to display, awesome! It is not updating my theme as expected, but let me work with it a bit now that the button is rendering and see if I can sort out the other issues. Thank you for your help!

#

It seems like maybe the theme is actaully working, but the storybook background color isn't changing making it tough to view the changes.

#

Is there a way to map this https://storybook.js.org/docs/react/essentials/backgrounds to the theme?

Backgrounds

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free.

sullen lynx Oct 18, 2023, 3:15 PM

#

@autumn notch you should make sure that you're also passing CSSBaseline from Mui into the withThemeFromJSXProvider decorator

#

That's what will style the background color for you

autumn notch Oct 18, 2023, 3:20 PM

#

sullen lynx <@662292327477542913> you should make sure that you're also passing CSSBaseline ...

Thank you, I am passing that in as follows. I am not sure if I need to do anything other than passing in the default import from MUI, but with this code it still does not update. It does show both of my background colors in the "change background color" dialog, but they still don't auto update on theme change.

const meta = {
    title: 'Components/Text Input',
    component: TextInput,
    tags: ['autodocs'],
    parameters: {
        layout: 'centered',
    },
    decorators: [
        withRouter,
        withThemeFromJSXProvider({
            themes: {
                light: lightTheme,
                dark: darkTheme,
            },
            defaultTheme: 'light',
            Provider: ThemeProvider,
            GlobalStyles: CssBaseline,
        }),
    ],
} satisfies Meta<typeof TextInput>;

sullen lynx Oct 18, 2023, 3:22 PM

#

@autumn notch You con't need to put the decorator into the meta of a story because you have it in your preview.ts already

#

Can you show me an example of your theme configs?

autumn notch Oct 18, 2023, 3:31 PM

#

sullen lynx <@662292327477542913> You con't need to put the decorator into the meta of a sto...

Ah got it, yep I had not added this line to preview.ts. I just did that and removed the decorator from the story. Still having the same issue. Will send theme.

autumn notch Oct 18, 2023, 3:32 PM

#

sullen lynx Can you show me an example of your theme configs?

export const lightTheme = createTheme({
    palette: {
        mode: 'light',
        primary: {
            light: '#42a5f5',
            main: '#1e88e5',
            dark: '#1565c0',
            contrastText: '#fff',
        },
        secondary: {
            light: '#80d8ff',
            main: '#40c4ff',
            dark: '#00b0ff',
            contrastText: '#000',
        },
        success: {
            light: '#81c784',
            main: '#4caf50',
            dark: '#388e3c',
            contrastText: '#fff',
        },
        error: {
            light: '#ef5350',
            main: '#e53935',
            dark: '#b71c1c',
            contrastText: '#fff',
        },
        background: {
            default: '#000',
        },
        text: {
            primary: '#000',
        },
        loader: {
            base: '#bbb',
            highlight: '#444',
        },
        favorite: {
            light: '#f8bbd0',
            main: '#f06292',
            dark: '#e91e63',
            contrastText: '#fff',
        },
    },
});

Let me know if this is not what you were after.

#

I can also get the whole project on a fresh github branch if that would be helpful.

sullen lynx Oct 18, 2023, 3:32 PM

#

Sure thing! that would be very helpful 😄

autumn notch Oct 18, 2023, 3:34 PM

#

sullen lynx Sure thing! that would be very helpful 😄

https://github.com/Thenlie/Streamability/tree/575-storybook-theme Here you go! Really appreciate your time thus far.

autumn notch Oct 18, 2023, 3:58 PM

#

I am wondering if the issue is because on my actual site I am using a tailwind class to update the background 🤔

sullen lynx Oct 18, 2023, 3:59 PM

#

Tht could be it

autumn notch Oct 18, 2023, 4:01 PM

#

Just a bit confused as the background colors I want show up in this drop down.

#

Is there a way to force a certain bg color on each theme? I am fine to hardcode the value if needed.

#

I tried removing the classname from index.html and also tried adding in the tailwind decorator. Neither of these approaches resolved the issue. ~~Was trying to manually set the bg as well in the story file but can't get that to apply.~~

#

I got the last part to work:

backgrounds: {
            default: 'light',
            values: [
                {
                    name: 'light',
                    value: '#0f0',
                },
                {
                    name: 'dark',
                    value: '#f00',
                },
            ],
        },

But these still do not dynamically update of course. If I could access MUI useTheme here I could maybe just pass in that value.

autumn notch Oct 18, 2023, 4:33 PM

#

Oh hey, removing the import '../index.css' line from preview.ts makes the bg update on theme switch!

autumn notch Oct 18, 2023, 4:58 PM

#

Bizzare, I added that import back in and everything still works. So not 100% sure what is/was going on, but it seems to work now?!

sullen lynx Oct 18, 2023, 5:10 PM

#

Odd! Sometimes things can get stuck in a wierd state and we could chalk it up to that 😄

#

Sometimes the background addon setting the background colour overrides the background set by the theme so it's best to use one or the other

autumn notch Oct 18, 2023, 5:51 PM

#

Yeah odd indeed! I had a buddy pull down the changes I made and they saw the same issue. Commenting out the CSS import resolved it. I am re-starting storybook after each change, so unsure how the behavior isn't consistent. But still digging. I at least understand where the issues are caused, just not 100% sure on the proper solution.

sullen lynx Oct 18, 2023, 5:58 PM

#

In your app, how are you syncing up the changes of your themes between tailwind and MUI?

autumn notch Oct 18, 2023, 6:13 PM

#

We are just manually syncing the theme between the two. Doesn't seem ideal and I have even been considering just dropping one of them all together.

#

And using Vite for the build.

rich kernel Oct 31, 2023, 11:55 AM

#

sullen lynx Hey <@662292327477542913>, have you registered the addon in your `main.ts` file?

This seems to be something that I had issues with. Do you mind updating the documentation over at: https://storybook.js.org/recipes/@emotion/styled to include the register to main.ts 😄

#Theme with JSX Provider does not work