hipstersmoothie / storybook-dark-mode

A storybook addon that lets your users toggle between dark and light mode.
MIT License
435 stars 56 forks source link

Breaks custom logo(theme) #154

Closed venelinn closed 3 years ago

venelinn commented 3 years ago

Hi guys, Great plugin, congrats ! I have custom config like this and just but loading your plugin all my custom theming options don't working anymore ! Here is my main.js

module.exports = {
  stories: [
    "../components/**/*.stories.mdx",
    "../components/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    '@storybook/addon-a11y',
    'storybook-dark-mode'
  ],
}

and my preview.js

export const parameters = {
 darkMode: {
    darkClass: 'dark-mode',
    lightClass: 'light-mode',
    classTarget: 'body',
    stylePreview: true
  },
}

my manager.js

import { addons } from '@storybook/addons';
import theme from './theme';

addons.setConfig({
  theme: theme,
});

my theme.js

import { create } from '@storybook/theming';
import logo from './public/logo.png';

export default create({
  base: 'light',
  brandTitle: 'My webpage,
  brandUrl: 'https://website.vision/',
  brandImage: logo,
});

Any idea why it breaks my theme?

Thank you !

venelinn commented 3 years ago

I was able to solve my issue by extending theme and adding my changes

darkMode: {
    darkClass: 'dark-mode',
    lightClass: 'light-mode',
    classTarget: 'body',
    stylePreview: true,
    dark: {
      ...themes.dark,
      ...apyTheme,
      brandImage: logoDark,
      appBg: '#071B3C',
      barBg: '#071B3C',
      appContentBg: '#1B3155',
      appBorderColor: '#6f7d94',
    },
    // Override the default light theme
    light: {
      ...themes.light,
      ...apyTheme,
      brandImage: logo,
    },
  },