旋钮和辅助功能面板颜色可以与Storybook 5中的appBg分开设置主题吗?

时间:2019-08-12 14:35:32

标签: css reactjs theming storybook

我正在用自己的主题(一盏灯和一盏黑灯)自定义我的Storybook 5。对于深色主题,我想要的唯一区别是使appBg更加深色,以模拟这种情况下组件的外观。我希望导航菜单和所有其他Storybook元素继续使用浅色背景色。通过更改深色主题文件中的appBg可以轻松实现。

问题是更改appBg不仅适用于显示组件本身的面板,而且还适用于旋钮和辅助功能面板的背景。我希望这些面板始终保持浅色主题。如何从上方区域分别定制旋钮和辅助功能面板?

Dark Theme

主题文件:

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


export default create({
  base: "light",

  colorPrimary: "#0075c9",
  colorSecondary: "#0075c9",

  // UI
  appBg: "#ffffff",
  appContentBg: "#2d2d2d",
  appBorderColor: "grey",
  appBorderRadius: 2,

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

  // Text colors
  textColor: "#25292d",
  textInverseColor: "rgba(255,255,255,0.9)",

  // Toolbar default and active colors
  barTextColor: "#003f8c",
  barSelectedColor: "#003f8c",
  barBg: "#e5f5ff",

  // Form colors
  inputBg: "white",
  inputBorder: "silver",
  inputTextColor: "#25292d",
  inputBorderRadius: 4,

  brandTitle: "My Project Name",
  brandUrl: "https://www.myurl.com",
  brandImage: logo
});

0 个答案:

没有答案