How to use the @storybook/theming.themes.normal function in @storybook/theming

const [isOpen, setIsOpen] = useState(false);

  const onToggle = () => {
    setIsOpen(!isOpen);
  };

  const { fullName, title, failureMessages, status } = props;
  return (
    
      
        
          {status === `failed` ? (
            
          ) : null}
          <div>{capitalizeFirstLetter(fullName) || capitalizeFirstLetter(title)}</div>
        
      
      {isOpen ? (
        
          {failureMessages.map((msg: string, i: number) =&gt; (
            // eslint-disable-next-line react/no-array-index-key
            
          ))}
        
      ) : null}

indeterminate?: boolean;
}

enum CheckBoxStates {
  CHECKED,
  UNCHECKED,
  INDETERMINATE,
}

const Checkbox = styled.input<{ disabled: boolean }>(({ disabled }) => ({
  cursor: disabled ? 'not-allowed' : 'pointer',
}));

const colorsByType = [
  convert(themes.normal).color.negative, // VIOLATION,
  convert(themes.normal).color.positive, // PASS,
  convert(themes.normal).color.warning, // INCOMPLETION,
];

const getIframe = memoize(1)(() => document.getElementsByTagName(IFRAME)[0]);

function getElementBySelectorPath(elementPath: string): HTMLElement {
  const iframe = getIframe();
  if (iframe && iframe.contentDocument && elementPath) {
    return iframe.contentDocument.querySelector(elementPath);
  }
  return null;
}

function setElementOutlineStyle(targetElement: HTMLElement, outlineStyle: string): void {
  // eslint-disable-next-line no-param-reassign
  targetElement.style.outline = outlineStyle;

const getColorByType = (type: string) => {
  // using switch to allow for new types to be added
  switch (type) {
    case StatusTypes.PASSED_TYPE:
      return convert(themes.normal).color.positive;
    case StatusTypes.FAILED_TYPE:
      return convert(themes.normal).color.negative;
    case StatusTypes.PENDING_TYPE:
      return convert(themes.normal).color.warning;
    case StatusTypes.TODO_TYPE:
      return convert(themes.normal).color.purple;
    default:
      return null;
  }
};

const getColorByType = (type: string) => {
  // using switch to allow for new types to be added
  switch (type) {
    case StatusTypes.PASSED_TYPE:
      return convert(themes.normal).color.positive;
    case StatusTypes.FAILED_TYPE:
      return convert(themes.normal).color.negative;
    case StatusTypes.PENDING_TYPE:
      return convert(themes.normal).color.warning;
    case StatusTypes.TODO_TYPE:
      return convert(themes.normal).color.purple;
    default:
      return null;
  }
};

toggleId?: string;
  indeterminate?: boolean;
}

enum CheckBoxStates {
  CHECKED,
  UNCHECKED,
  INDETERMINATE,
}

const Checkbox = styled.input<{ disabled: boolean }>(({ disabled }) => ({
  cursor: disabled ? 'not-allowed' : 'pointer',
}));

const colorsByType = [
  convert(themes.normal).color.negative, // VIOLATION,
  convert(themes.normal).color.positive, // PASS,
  convert(themes.normal).color.warning, // INCOMPLETION,
];

const getIframe = memoize(1)(() => document.getElementsByTagName(IFRAME)[0]);

function getElementBySelectorPath(elementPath: string): HTMLElement {
  const iframe = getIframe();
  if (iframe && iframe.contentDocument && elementPath) {
    return iframe.contentDocument.querySelector(elementPath);
  }
  return null;
}

function setElementOutlineStyle(targetElement: HTMLElement, outlineStyle: string): void {
  // eslint-disable-next-line no-param-reassign

interface Window {
    _StorybookBootstrap: any;
  }
}

const req = require.context('../stories', true, /\.stories\.tsx$/);

function loadStories() {
  req.keys().forEach(req);
}

// Option defaults.
addParameters({
  options: {
    name: 'App',
    theme: themes.normal,
  },
});

configure(loadStories, module);