故事书：无法更改 UI 上的主题颜色

Posted 2023-02-19

【中文标题】故事书：无法更改 UI 上的主题颜色

【英文标题】：Storybook: can't change theming color on UI

【发布时间】：2021-12-31 02:46:00

【问题描述】：

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

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

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',
);

【参考方案1】：

我解决了这个问题！我必须更新到最新的 Storybook 版本并使用 --no-manager-cache 运行