Improve styling of OpenAPI component (especially in dark mode) (#1961)

plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinitionWidget.tsx

@@ -15,12 +15,61 @@
  */
 
 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>
   );