Closed adityapant1286 closed 1 year ago
@renatomoor the element that had the id docs-root
in 6.5, now has the id storybook-docs
in 7.0. You could try changing the implementation to that and see if it fixes it. However I would expect it to be a breaking change to this addon, since it would make it only compatible with 7.0, but that's not for me to decide.
The change can be seen here https://github.com/storybookjs/storybook/pull/10638
@JReinhold @adityapant1286.
@freddyamarante has made the fix and has also released the new version
Hi @freddyamarante , thank you for fixing it. Not sure it is an issue with storybook 7 or this case is failing.
The controls are showing correct colors for dark and light mode. However, the background color remains white.
Button in light-mode
Button in dark-mode
Perhaps need to update background color of the body element having .sb-show-main
class.
preview.ts file for a reference
const preview: Preview = {
globalTypes: {
darkMode: {
defaultValue: true, // Enable dark mode by default on all stories
}
},
parameters: {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
darkMode: {
current: 'light',
dark: { ...themes.dark, appBg: '#171717' },
light: { ...themes.normal, appBg: '#ffffff' }
},
},
};
I'll take a look at it! I also think would be convenient to add a way to input what background color you want, I'll pr soon
Hi @renatomoor and @freddyamarante, this recent request is closed, would you advise moving to a new issue or mark this to 'open'.
Hi @renatomoor,
Thank you for your efforts working on this package.
There is an error observed for Storybook 7. The element to add
dark
class is null as there is no such element exists with the iddocs-root
. This errors out when addingdark
class. Changing the background ofbody
element is working, but this is a hack. Please advise.https://github.com/renatomoor/storybook-tailwind-dark-mode/blob/2860d303f524a617ac8bf0a87dd31bc974b8dbcd/src/withGlobals.js#L9
Receiving this error for Docs: