diff --git a/web_src/css/standalone/swagger.css b/web_src/css/standalone/swagger.css
index 4285fc0551..e65af5ded6 100644
--- a/web_src/css/standalone/swagger.css
+++ b/web_src/css/standalone/swagger.css
@@ -10,7 +10,7 @@ body {
 }
 
 .swagger-back-link {
-  color: #1f69c0;
+  color: #4990e2;
   text-decoration: none;
   position: absolute;
   top: 1rem;
@@ -19,6 +19,18 @@ body {
   align-items: center;
 }
 
+@media (prefers-color-scheme: dark) {
+  body {
+    background: #1c2022;
+  }
+  .swagger-back-link {
+    color: #51a8ff;
+  }
+  .swagger-ui table.headers td {
+    color: #aeb4c4; /** fix low contrast */
+  }
+}
+
 .swagger-back-link:hover {
   text-decoration: underline;
 }
@@ -32,15 +44,3 @@ body {
 .swagger-spec-content {
   display: none;
 }
-
-@media (prefers-color-scheme: dark) {
-  body {
-    background: #14171a;
-  }
-  .swagger-ui, .swagger-back-link {
-    filter: invert(88%) hue-rotate(180deg);
-  }
-  .swagger-ui .microlight {
-    filter: invert(100%) hue-rotate(180deg);
-  }
-}
diff --git a/web_src/js/standalone/swagger.ts b/web_src/js/standalone/swagger.ts
index 81759a2d02..0681d62e7e 100644
--- a/web_src/js/standalone/swagger.ts
+++ b/web_src/js/standalone/swagger.ts
@@ -3,6 +3,11 @@ import 'swagger-ui-dist/swagger-ui.css';
 import {load as loadYaml} from 'js-yaml';
 import {GET} from '../modules/fetch.ts';
 
+const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+const apply = () => document.documentElement.classList.toggle('dark-mode', prefersDark.matches);
+apply();
+prefersDark.addEventListener('change', apply);
+
 window.addEventListener('load', async () => {
   const elSwaggerUi = document.querySelector('#swagger-ui')!;
   const url = elSwaggerUi.getAttribute('data-source')!;