我正在用自己的主题(一盏灯和一盏黑灯)自定义我的Storybook 5。对于深色主题,我想要的唯一区别是使appBg更加深色,以模拟这种情况下组件的外观。我希望导航菜单和所有其他Storybook元素继续使用浅色背景色。通过更改深色主题文件中的appBg可以轻松实现。
问题是更改appBg不仅适用于显示组件本身的面板,而且还适用于旋钮和辅助功能面板的背景。我希望这些面板始终保持浅色主题。如何从上方区域分别定制旋钮和辅助功能面板?
主题文件:
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
});