Not loading multiple themes

[echoulen]

Not loading multiple themes

[laujonat]

@echoulen thank you, it works this great! May I suggest rewordingMake sure every theme with name property to maybe Include a name attribute in the theme object?

Anyways, I understand now. Thank you.

[echoulen]

make sure your storybook is v5 and
please install the latest version v1.2.3

[laujonat]

Thank you for the response.
Here is the list of dependencies from my package.json.

    "@babel/cli": "^7.4.3",
    "@babel/core": "^7.4.3",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/preset-env": "^7.4.3",
    "@babel/preset-react": "^7.0.0",
    "@storybook/addon-actions": "^5.0.11",
    "@storybook/addon-info": "^5.0.11",
    "@storybook/addon-links": "^5.0.11",
    "@storybook/addon-options": "^5.0.11",
    "@storybook/addon-storysource": "^5.0.11",
    "@storybook/react": "^5.0.11",
    "babel-loader": "^8.0.5",
    "babel-plugin-styled-components": "^1.10.0",
    "cross-env": "^5.2.0",
    "eslint-config-prettier": "^4.3.0",
    "eslint-plugin-html": "^5.0.5",
    "eslint-plugin-import": "^2.17.2",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-react": "^7.13.0",
    "lint-staged": "^8.1.6",
    "npm": "^6.9.0",
    "prettier": "^1.17.1",
    "prop-types": "^15.7.2",
    "react": "^16.8.2",
    "react-dom": "^16.8.2",
    "react-scripts": "^3.0.1",
    "react-test-renderer": "^16.8.6",
    "rollup": "^1.12.2",
    "rollup-plugin-babel": "^4.3.2",
    "rollup-plugin-commonjs": "^10.0.0",
    "rollup-plugin-node-resolve": "^5.0.0",
    "rollup-plugin-replace": "^2.1.1",
    "storybook-addon-styled-component-theme": "^1.2.3",
    "styled-components": "^4.1.3"

Here is the list of peer dependencies.

 "react": "^16.8.6",
"react-dom": "^16.8.6",
"styled-components": "^2.0.0 || ^3.0.2"

Still experiencing the same issue. In the array of themes, only the first item of the list will be rendered onto the storybook, but I can investigate a bit further.

[echoulen]

@laujonat
may you show the themes object?

[laujonat]

Here's my theme.js.

const themes = {}

themes.default = {
  text: "#333333",
  success: "#0F9960",
  alert: "C23030",
  warn: "#F2B824",
}

themes.stealth = {
  text: "#C23030",
  success: "#C23030",
  alert: "#C23030",
  warn: "#C23030",
}

export default themes

And config.js

import { configure, addDecorator } from "@storybook/react"
import { withInfo } from "@storybook/addon-info"
import { withThemesProvider } from "storybook-addon-styled-component-theme"

import themes from "../src/shared/themes"

import GlobalStyle from "./decorators/globalStyle"

const _themes = [themes.default, themes.stealth]

addDecorator(GlobalStyle)
addDecorator(withThemesProvider(_themes)

Thank you

[echoulen]

https://github.com/echoulen/storybook-addon-styled-component-theme#remind

[laujonat]

@echoulen I'm sorry, unclear what you are referring to. The project is set up according to the specifications.

Here is the repository: https://github.com/laujonat/styled-lite

[echoulen]

modify your themes to

themes.default = {
  name: "default",
  text: "#333333",
  success: "#0F9960",
  alert: "C23030",
  warn: "#F2B824",
}

themes.stealth = {
  name: "stealth",
  text: "#C23030",
  success: "#C23030",
  alert: "#C23030",
  warn: "#C23030",
}

The name property of theme object is required