Switching Between CSS Files in Themes Add on on Storybook 7 #27419
Replies: 4 comments 1 reply
-
Can you provide more information about how this is configured?
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 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)
}
}; |
Beta Was this translation helpful? Give feedback.
-
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 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.
|
Beta Was this translation helpful? Give feedback.
-
![]() |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
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.
Beta Was this translation helpful? Give feedback.
All reactions