storybookjs/storybook

Storybook theming does not allow for changing top level headers in sidebar

Open

#17,260 opened on 2022年1月17日

GitHub で見る
 (2 comments) (1 reaction) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
buggood first issuehelp wantedsev:S4theming

説明

Describe the bug Using the documentation here: https://storybook.js.org/docs/react/configure/theming I haven't found a way to change the coloring of the top level headers in the side menu. They are stuck with the color of #999, and there doesn't appear to be an easily targeted class to override it, css-ulso1l.

To Reproduce

  1. Create a custom theme
import { create } from '@storybook/theming';
export default create({
  base: 'light',
  colorPrimary: '#ff0000',
  colorSecondary: '#cc0000',

  // UI
  appBg: '#555',
  appContentBg: '#eee',
  appBorderColor: 'grey',
  appBorderRadius: 4,
  textColor: '#000',
  textInverseColor: '#fff',
  textMutedColor: '#444',

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

  // Toolbar default and active colors
  barTextColor: 'silver',
  barSelectedColor: '#222',
  barBg: 'grey',

  // Form colors
  inputBg: 'grey',
  inputBorder: 'silver',
  inputTextColor: 'white',
  inputBorderRadius: 4
});
  1. View Sidebar contents with a Grouped set of stories. In the image below, the Form Components text is the text I'm trying to target.

コントリビューターガイド