message: Improve styling of OpenAPI component (especially in dark mode)
diff: */
  import React, { FC, useEffect, useState } from 'react';
  +import { makeStyles } from '@material-ui/core/styles';
  import SwaggerUI from 'swagger-ui-react';
  import 'swagger-ui-react/swagger-ui.css';
  +// TODO: Schemas
  +
  +const useStyles = makeStyles(theme => ({
  + root: {
  + '& .swagger-ui, .info h1, .info h2, .info h3, .info h4, .info h': {
  + 'font-family': 'inherit',
  + color: theme.palette.text.primary,
  + },
  + '& .scheme-container': {
  + 'background-color': theme.palette.background.default,
  + },
  + '& .opblock-tag, .opblock-tag small, table thead tr td, table thead tr th': {
  + color: theme.palette.text.primary,
  + 'border-color': theme.palette.divider,
  + },
  + '& section.models, section.models.is-open h4': {
  + 'border-color': theme.palette.divider,
  + },
  + '& .opblock .opblock-summary-description, .parameter__type, table.headers td, .model-title, .model .property.primitive': {
  + color: theme.palette.text.secondary,
  + },
  + '& .opblock .opblock-summary-operation-id, .opblock .opblock-summary-path, .opblock .opblock-summary-path__deprecated, .opblock .opblock-section-header h4, .parameter__name, .response-col_status, .response-col_links, .responses-inner h4, .swagger-ui .responses-inner h5, .opblock-section-header .btn, .tab li, .info li, .info p, .info table, section.models h4, .info .title, table.model tr.description, .property-row': {
  + color: theme.palette.text.primary,
  + },
  + '& .opblock .opblock-section-header, .model-box, section.models .model-container': {
  + background: theme.palette.background.default,
  + },
  + '& .prop-format, .parameter__in': {
  + color: theme.palette.text.disabled,
  + },
  + '& ': {
  + color: theme.palette.text.primary,
  + 'border-color': theme.palette.divider,
  + },
  + '& .opblock-description-wrapper p, .opblock-external-docs-wrapper p, .opblock-title_normal p, .response-control-media-type__accept-message, .opblock .opblock-section-header>label, .scheme-container .schemes>label, .info .base-url, .model': {
  + color: theme.palette.text.hint,
  + },
  + '& .parameter__name.required:after': {
  + color: theme.palette.warning.dark,
  + },
  + '& .prop-type': {
  + color: theme.palette.primary.main,
  + },
  + },
  +}));
  +
  export const OpenApiDefinitionWidget: FC<{
  definition: any;
  }> = ({ definition }) => {
  + const classes = useStyles();
  +
  // Due to a bug in the swagger-ui-react component, the component needs
  // to be created without content first.
  const [def, setDef] = useState('');
  @@ -30,10 +79,8 @@ export const OpenApiDefinitionWidget: FC<{
  return () => clearTimeout(timer);
  }, [definition, setDef]);
  - // TODO: This looks fine in the light theme, but wrong in dark mode. We need a custom stylesheet for swagger-ui.
  - // Till then, we add a white background to the swagger-ui to make it usable in dark mode.
  return (
  - <div style={{ backgroundColor: 'white' }}>
  + <div className={classes.root}>
  <SwaggerUI spec={def} />
  </div>
  );
  