made sure that the api route can handle the darkmode gracefully

TUM-Dev · Mar 7, 2024 · b919400 · b919400
1 parent f3f9009
commit b919400
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git 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
@@ -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>