Storybook को Theme और Style करना

Theme configuration

Storybook एक theming API का use करता है colors, typography, और UI elements को customize करने के लिए। एक branded Storybook बनाएँ जो आपके design system से match करता है।

Custom theme example

Storybook के UI को customize करने के लिए एक theme object define करें।

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

export default create({
  base: 'light',
  brandTitle: 'My Design System',
  brandImage: 'https://example.com/logo.svg',
  colorPrimary: '#f97316',
  colorSecondary: '#0891b2',
  textColor: '#333',
  textInverseColor: '#fff',
});

Dark mode support

Storybook light और dark themes को out of the box support करता है। Ensure करें कि आपके components दोनों modes में अच्छे लगते हैं।

Themes में consistency

Consistent appearance और readability ensure करने के लिए अपने stories को light और dark दोनों themes में test करें।