Closed saikat-samanta closed 1 year ago
Experiencing the same issue.
I had this same problem, I have solved it by removing all theming from .storybook/manager.js
and instead added it under light
in .storybook/preview.js
.
This is working but I now get a flash of Storybooks default theming before my custom theme loads :(
// .storybook/preview.js
import { themes } from "@storybook/theming"
import storybookBrandImage from "./StorybookBrandImage.png"
export const parameters = {
darkMode: {
current: "light",
light: {
...themes.normal,
brandTitle: "yourTitle",
brandUrl: "yourURL",
brandImage: storybookBrandImage,
}
dark: {
...themes.dark,
}
}
}
If anyone knows a solution to the default theming flash before my custom theming loads, please let me know 🙏🏽
@nikkipantony Thank you for sharing your workaround. I am using it to fix the aforementioned issue.
@rafaelrinaldi glad it helped 👍
@nikkipantony Solution is great and the only thing I can add to improve this workaround is that you can keep yourTheme.js file, export it and spread it.
// yourTheme.js
export const brandTheme = {
light: {
base: "light",
colorPrimary: "#222",
colorSecondary: "#eed457",
brandTitle: "JS",
brandUrl: "https://en.wikipedia.org/wiki/JavaScript",
brandImage:
"https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/600px-JavaScript-logo.png",
},
};
// preview.js
import { themes } from "@storybook/theming";
import { brandTheme } from "./theme";
export const parameters = {
darkMode: {
current: "light",
light: {
...themes.normal,
...brandTheme.light,
},
dark: {
...themes.dark,
},
},
};
Thanks Nikki!
Can we please have a fix for this or mention something on the README. I spent a couple of hours without understanding this addon was causing issues.
@vishnup-ditto would you be will to submit a PR?
This issue should be closed, because the solution is in the Readme.md
https://github.com/hipstersmoothie/storybook-dark-mode#configuration
Input ==>>
Output ===>>![image](https://user-images.githubusercontent.com/72792049/127647251-8801e3ac-fadb-4287-a987-7b0f4be54869.png)