Switching Between CSS Files in Themes Add on on Storybook 7

[dmarcisovska]

Summary

Hey :) Trying to switch between two CSS themes using add-on themes. This is the code I have in preview.js so far:

I am using placeholder css names below - I am importing two css packages (that are from the company I work for), one is dark, the other is light css. This code works initially being set to the light theme and then for switching to the dark theme using a paintbrush toggle at the top of storybook, but will NOT switch back to the light theme after being in the dark theme.

I will be very grateful for any suggestions.

const loadCSS = async (theme) => {
    if (theme === 'dark') {
      await import('my-dark-css');
    } 
    if (theme === 'light') {
        await import('my-css');
      }
    else {
      await import('my-dark-css');
    }
  };

  theme: {
        name: 'Theme',
        description: 'Global theme for components',
        defaultValue: 'light',
        defaultTheme: 'light',
        toolbar: {
            icon: 'paintbrush',
            items: [{ value: 'light', title: 'Light' }, { value: 'dark', title: 'Dark' }],
        },
    },
    
    
    export const decorators = [
    withThemeProvider,

[Marklb]

Can you provide more information about how this is configured?

• Where is loadCSS called from? I assume a decorator.
• What is withThemeProvider? I don't think the addon has a decorator that doesn't specify what kind it is. So, is that custom or am I wrong about that?
• How does await import('my-*-css') work? I assume you have a loader that adds a style element for you, but knowing which one could help with finding a solution.

I don't know how your stylesheets are designed, but if you need to replace the whole stylesheet then I assume they are not wrapping the theme specific CSS rules with a parent class or attribute that can be changed.

Without knowing how your CSS loader works, I can't provide a snippet, but I would see if there is any identifier added to the style element. If you can query the style element then you can remove and add it back to the DOM a needed.

The following is a very rough snippet of my idea. You could have more clean and organized code, but I just wanted to quickly display my idea in a fairly straightforward way. Depending on your loader, this may already be something it already supports and can be done much more simple.

const styleElems = {
  dark: null,
  light: null,
};
const stylePaths = {
  dark: 'my-dark-css',
  light: 'my-css',
};
const toggleThemeStyles = async (theme, enable) => {
  if (!styleElems[theme]) {
    // This is where knowing your loader would be useful.
    // For this example, I will just assume your loader
    // adds an attribute with the theme as the value, but
    // it most likely doesn't really work this way.
    styleElems[theme] = document.querySelector(`style[theme=${theme}]`)
    if (!styleElems[theme]) {
      await import(stylePaths[theme])
    }
  }
  
  if (enable) {
    if (!styleElems[theme].parentElement) {
      document.head.appendChild(styleElems[theme])
    }
  } else {
    if (styleElems[theme].parentElement) {
      styleElems[theme].parentElement.removeChild(styleElems[theme])
    }
  }
};
const loadCSS = async (theme) => {
  if (theme === 'light') {
    await toggleThemeStyles('light', true)
    await toggleThemeStyles('dark', false)
  } else {
    await toggleThemeStyles('light', false)
    await toggleThemeStyles('dark', true)
  }
};

[dmarcisovska]

Thank you so much @Marklb for getting back to me I really appreciate it. My apologies for not providing enough details.

WithThemeProviders - this is just naming for the function where I call LoadCSS - this can be called anything I believe - see code below.

I am importing a style sheet from our company it is an internal npm package. All this stylesheet has is variable names and values. We have two of these stylesheets, they have the same variable names but the variable names corresponding to either dark or light colors depending on the npm package imported. Our CSS that is local in storybook.js is hooked up variables and only the variable values change - the rest of the css naming stays the same.

SIDENOTE - I don't need to use this plugin, but don't know which plugin is best for switching between dark and light CSS token files
in Storybook7.

This is how LoadCSS is being called from - am including the loadCSS function again for reference, and under it is where it is being called.

const loadCSS = async (theme) => {
    if (theme === 'dark') {
      await import('dark-css-variables');
    } 
    if (theme === 'light') {
        await import('light-css-variables');
      }
    else {
      await import('light-css-variables');
    }
  };


  const withThemeProvider = (Story, context) => {
    useEffect(() => {
      const theme = context.globals.theme;
      loadCSS(theme);
    }, [context.globals.theme]);
  
    return <Story {...context} />;
  };

[RockAtRockwell]

Where do you define useEffect() or is that imported from a package/addon? I believe I'm trying to do the same thing currently in our project, switching themes by switching which css stylesheet with the theme variables is imported at run time, so I'll gladly share a solution here if I find one.

[dmarcisovska]

I want to be able to take this paintbrush and switch between light and dark. With my current code it switches to dark but will not switch back to light.

[dmarcisovska]

I just want to confirm that this solution provided did not work for me and I am still stuck trying to figure out how to switch between two css files in storybook7 using the themeAdd on plugin. Also fine doing this via backgrounds built in plugin - but the documentation doe snot specify how to change the css file doing this.

[Joerdwa]

Just wanted to add to this that I've been trying to attempt a similar strategy to swap between variables across different CSS files to supply brand theming. I've had success creating my own custom 'theme' decorator following the examples in addon-themes. However, I've ran into issues particular using vite as my builder/loader to swap the files at runtime, struggling to find a way to remove previously imported css on switching theme.

This seems not trivial from my investigations so far and ideally, I'd like to avoid having to wrap the brand variables in an attribute selector just to support swapping between brands in my storybook instance. Any suggestions on how to achieve this would be greatly appreciated.

For context:
Storybook: 8.5.8
Framework: @storybook/html-vite