chore: updated styling

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>

packages/api/v1/api-documentation.css

@@ -1,9 +0,0 @@
-/* Custom CSS for dark mode */
-@media (prefers-color-scheme: dark) {
-  .swagger-ui {
-      filter: invert(85%) hue-rotate(180deg);
-  }
-  .swagger-ui .microlight {
-      filter: invert(100%) hue-rotate(180deg);
-  }
-}

packages/api/v1/api-documentation.tsx

@@ -1,15 +1,30 @@
 'use client';
 
+import { useEffect } from 'react';
+
+import { useTheme } from 'next-themes';
 import SwaggerUI from 'swagger-ui-react';
 import 'swagger-ui-react/swagger-ui.css';
 
 import { OpenAPIV1 } from '@documenso/api/v1/openapi';
 
-// Custom Dark Mode CSS for the Swagger UI
-// eslint-disable-next-line prettier/prettier
-import './api-documentation.css';
-
 export const OpenApiDocsPage = () => {
+  const { theme } = useTheme();
+
+  useEffect(() => {
+    const body = document.body;
+
+    if (theme === 'dark') {
+      body.classList.add('swagger-dark-theme');
+    } else {
+      body.classList.remove('swagger-dark-theme');
+    }
+
+    return () => {
+      body.classList.remove('swagger-dark-theme');
+    };
+  }, [theme]);
+
   return <SwaggerUI spec={OpenAPIV1} displayOperationId={true} />;
 };
 

packages/ui/styles/theme.css

@@ -129,3 +129,12 @@
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
   background: rgb(100 116 139 / 0.5);
 }
+
+ /* Custom Swagger Dark Theme */
+.swagger-dark-theme .swagger-ui {
+  filter: invert(88%) hue-rotate(180deg);
+}
+
+.swagger-dark-theme .swagger-ui .microlight {
+  filter: invert(100%) hue-rotate(180deg);
+}