Add dark swagger docs

Author: MartinBraquet

backend/api/package.json

@@ -11,11 +11,11 @@
     "build": "yarn compile && yarn dist:clean && yarn dist:copy",
     "build:fast": "yarn compile && yarn dist:copy",
     "clean": "rm -rf lib && (cd ../../common && rm -rf lib) && (cd ../shared && rm -rf lib) && (cd ../email && rm -rf lib)",
-    "compile": "tsc -b && tsc-alias && (cd ../../common && tsc-alias) && (cd ../shared && tsc-alias) && (cd ../email && tsc-alias)",
+    "compile": "tsc -b && tsc-alias && (cd ../../common && tsc-alias) && (cd ../shared && tsc-alias) && (cd ../email && tsc-alias) && cp -r src/public/ lib/",
     "debug": "nodemon -r tsconfig-paths/register --watch src -e ts --watch ../../common/src --watch ../shared/src --exec \"yarn build && node --inspect-brk src/serve.ts\"",
     "dist": "yarn dist:clean && yarn dist:copy",
     "dist:clean": "rm -rf dist && mkdir -p dist/common/lib dist/backend/shared/lib dist/backend/api/lib dist/backend/email/lib",
-    "dist:copy": "rsync -a --delete ../../common/lib/ dist/common/lib && rsync -a --delete ../shared/lib/ dist/backend/shared/lib && rsync -a --delete ../email/lib/ dist/backend/email/lib && rsync -a --delete  ./lib/* dist/backend/api/lib && cp ../../yarn.lock dist && cp package.json dist && cp package.json dist/backend/api",
+    "dist:copy": "rsync -a --delete ../../common/lib/ dist/common/lib && rsync -a --delete ../shared/lib/ dist/backend/shared/lib && rsync -a --delete ../email/lib/ dist/backend/email/lib && rsync -a --delete ./lib/* dist/backend/api/lib && cp ../../yarn.lock dist && cp package.json dist && cp package.json dist/backend/api",
     "watch": "tsc -w",
     "verify": "yarn --cwd=../.. verify",
     "verify:dir": "npx eslint . --max-warnings 0",

backend/api/src/app.ts

@@ -67,6 +67,7 @@ import {z, ZodFirstPartyTypeKind, ZodTypeAny} from "zod";
 import {getUser} from "api/get-user";
 import {IS_LOCAL} from "common/envs/constants";
 import {localSendTestEmail} from "api/test";
+import path from "node:path";
 
 // const corsOptions: CorsOptions = {
 //   origin: ['*'], // Only allow requests from this domain
@@ -500,10 +501,13 @@ app.get(
   rootPath,
   swaggerUi.setup(swaggerDocument, {
     customSiteTitle: 'Compass API Docs',
+    customCssUrl: '/swagger.css',
   }),
 )
 app.use(rootPath, swaggerUi.serve)
 
+app.use(express.static(path.join(__dirname, 'public')));
+
 app.use(allowCorsUnrestricted, (req, res) => {
   if (req.method === 'OPTIONS') {
     res.status(200).send()

backend/api/src/public/swagger.css

@@ -0,0 +1,64 @@
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #1e1e1e !important;
+        color: #ffffff !important;
+    }
+    .swagger-ui p,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    label,
+    .btn,
+    .parameter__name,
+    .parameter__type,
+    .parameter__in,
+    .response-control-media-type__title,
+    table thead tr td,
+    table thead tr th,
+    .tab li,
+    .response-col_links,
+    .opblock-summary-description {
+        color: #ffffff !important;
+    }
+    .swagger-ui .topbar, .opblock-body select, textarea {
+        background-color: #2b2b2b !important;
+        color: #ffffff !important;
+    }
+    .swagger-ui .opblock {
+        background-color: #2c2c2c !important;
+        border-color: #fff !important;
+    }
+    .swagger-ui .opblock .opblock-summary-method {
+        background-color: #1f1f1f !important;
+        color: #fff !important;
+    }
+    .swagger-ui .opblock .opblock-section-header {
+        background: #1f1f1f !important;
+        color: #fff !important;
+    }
+    .swagger-ui .responses-wrapper {
+        background-color: #1f1f1f !important;
+    }
+    .swagger-ui .response-col_status {
+        color: #fff !important;
+    }
+    .swagger-ui .scheme-container {
+        background-color: #1f1f1f !important;
+    }
+    .swagger-ui .modal-ux, input {
+        background-color: #1f1f1f !important;
+        color: #fff !important;
+    }
+    .swagger-ui svg path {
+        fill: white !important;
+    }
+    .swagger-ui .close-modal svg {
+        color: #1e90ff !important;
+    }
+    a {
+        color: #1e90ff !important;
+    }
+}