Storybook：无法更改 UI 上的主题颜色

Question

我正在尝试在 Storybook 中创建我自己的主题，我正在关注这个：https://storybook.js.org/docs/angular/configure/theming

现在我从网站上复制了文件，这很有效，但我似乎无法根据自己的喜好更改颜色。例如，当我将 appBg 上的颜色更改为绿色时，它仍然保持为热粉色。有人可以帮忙吗，我错过了一步吗？

manager.js

// .storybook/manager.js

import { addons } from '@storybook/addons';
import yourTheme from './YourTheme';

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

YourTheme.js


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

export default create({
  base: 'light',

  colorPrimary: 'hotpink',
  colorSecondary: 'deepskyblue',

  // UI
  appBg: 'white',
  appContentBg: 'silver',
  appBorderColor: 'grey',
  appBorderRadius: 4,

  // Typography
  fontBase: '"Open Sans", sans-serif',
  fontCode: 'monospace',

  // Text colors
  textColor: 'black',
  textInverseColor: 'rgba(255,255,255,0.9)',

  // Toolbar default and active colors
  barTextColor: 'silver',
  barSelectedColor: 'black',
  barBg: 'hotpink',

  // Form colors
  inputBg: 'white',
  inputBorder: 'silver',
  inputTextColor: 'black',
  inputBorderRadius: 4,

  brandTitle: 'My custom storybook',
  brandUrl: 'https://example.com',
  brandImage: 'https://place-hold.it/350x150',
});

Answer 1

我解决了问题！我必须更新到最新的 Storybook 版本和运行和 --no-manager-cache

Storybook：无法更改 UI 上的主题颜色

Storybook: can't change theming color on UI

javascript

theming

angular

storybook

angular-storybook