search

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

Getting error: Uncaught Error: Passed an incorrect argument to a color function #140

Closed kyrstenkelly closed 3 years ago

kyrstenkelly commented 3 years ago

Hi! I'm experiencing a bug when I try to use this addon. Here's what I'm seeing in both the browser console and my terminal.

Uncaught Error: Passed an incorrect argument to a color function, please pass a string representation of a color.

Screen Shot 2021-03-03 at 11 16 54 AM

Here are my relevant files.

Our custom theme file - .storybook/customTheme.js

// Custom theme - this file already existed and worked
import { create } from "@storybook/theming";

export default create({
  base: "light",
  colorPrimary: "#02B3E4",
  colorSecondary: "#017A9B"
});

Using our custom theme - .storybook/manager.js

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

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

I installed the addon: npm install -D storybook-dark-mode and it installed: "storybook-dark-mode": "^1.0.4"

and added the addon to my .storybook/main.js:

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

and that's when I get the error.

I have also tried adding configuration in my .storybook/preview.js file like so, but I still get the error:

import { themes } from '@storybook/theming';

export const parameters = {
  ...
  darkMode: {
    dark: { ...themes.dark, appBg: 'black' },
    light: { ...themes.normal, appBg: 'white' }
  }
}

I tried many variations of setting the darkMode configuration in the parameters. I tried extending our own theme instead of themes from storybook/theming, and many other things.

Am I doing something wrong? I feel like I'm following the steps in the documentation accurately. I'd love some assistance, thank you.

hipstersmoothie commented 3 years ago

Could you get a reproduction repo together? thanks!

kyrstenkelly commented 3 years ago

Yep! Here we go. This repo shows the error for me: https://github.com/kyrstenkelly/storybook-dark-mode-example

May be worth noting that I'm on:

hipstersmoothie commented 3 years ago

Were you running this before without issue? I think what's happening is you updated storybook to a new version and this plugin is caching an old version of the theme leading to a broken storybook.

Could you try opening storybook in a private window?

hipstersmoothie commented 3 years ago

:rocket: Issue was released in v1.0.5 :rocket: