From b919400d964cd2dfd71aa8f3a16a57987d7318a0 Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Thu, 7 Mar 2024 01:39:46 +0100
Subject: [PATCH] made sure that the api route can handle the darkmode
 gracefully

---
 webclient/src/components/PreferencesPopup.vue | 1 -
 webclient/src/pages/api.vue                   | 9 +++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/webclient/src/components/PreferencesPopup.vue b/webclient/src/components/PreferencesPopup.vue
index 7fd8eafd0..49509e4d0 100644
--- a/webclient/src/components/PreferencesPopup.vue
+++ b/webclient/src/components/PreferencesPopup.vue
@@ -11,7 +11,6 @@ type UserTheme = "light" | "dark";
 
 const theme = ref<UserTheme>(initialUserTheme());
 watchEffect(() => {
-  console.log();
   document.documentElement.className = theme.value;
   saveCooke("theme", theme.value);
 });
diff --git a/webclient/src/pages/api.vue b/webclient/src/pages/api.vue
index e7b67c928..74e50a588 100644
--- a/webclient/src/pages/api.vue
+++ b/webclient/src/pages/api.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import "swagger-ui-dist/swagger-ui.css";
-
+// TODO: this is reaaaly hacky, but I have no idea how to
+//  - convince vue to allow conditional css imports
+//  - postcss to allow for imports under a selector
+if (localStorage.getItem("theme") === "dark") {
+  import("swaggerdark/SwaggerDark.css");
+}
 window.setTimeout(() => {
   // we need to make sure, that swagger-ui exists, otherwise the following command will fail
   // therefore waiting is effective
@@ -15,7 +20,7 @@ window.setTimeout(() => {
 </script>
 
 <template>
-  <div id="swagger-ui" />
+  <div id="swagger-ui" class="pt-0.5" />
 </template>
 
 <style lang="postcss" scoped>