Storybook `brandTitle` and `brandLogo` is not working with `storybook-dark-mode`

[saikat-samanta]

Input ==>>

// .storybook/manager.js

import { addons } from "@storybook/addons";
import { create } from "@storybook/theming";

addons.setConfig({
  theme: create({
    base: "light",
    brandTitle: "foo",
    brandUrl: "https://www.xyz.com/",
    brandImage:
      "https://manufac-analytics-images.s3.ap-south-1.amazonaws.com/logos/landscape/black/Manufac_Final-2.png",
  }),
});

Output ===>>

[aberhamm]

Experiencing the same issue.

[h0t-p1xels]

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 🙏🏽

[rafaelrinaldi]

@nikkipantony Thank you for sharing your workaround. I am using it to fix the aforementioned issue.

[h0t-p1xels]

@rafaelrinaldi glad it helped 👍

[Miguel-Bento-Github]

@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!

[vishnup-ditto]

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.

[hipstersmoothie]

@vishnup-ditto would you be will to submit a PR?

[VictorJSV]

This issue should be closed, because the solution is in the Readme.md https://github.com/hipstersmoothie/storybook-dark-mode#configuration