From cc483016d8d6732b8a47365181dc31cee4323888 Mon Sep 17 00:00:00 2001
From: Adithya Krishna <aadithya794@gmail.com>
Date: Wed, 13 Mar 2024 13:24:09 +0530
Subject: [PATCH] chore: updated styling

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>
---
 packages/api/v1/api-documentation.css |  9 ---------
 packages/api/v1/api-documentation.tsx | 23 +++++++++++++++++++----
 packages/ui/styles/theme.css          |  9 +++++++++
 3 files changed, 28 insertions(+), 13 deletions(-)
 delete mode 100644 packages/api/v1/api-documentation.css

diff --git a/packages/api/v1/api-documentation.css b/packages/api/v1/api-documentation.css
deleted file mode 100644
index 9deba27ea..000000000
--- a/packages/api/v1/api-documentation.css
+++ /dev/null
@@ -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);
-  }
-}
diff --git a/packages/api/v1/api-documentation.tsx b/packages/api/v1/api-documentation.tsx
index b7c36fa8b..98bdd7095 100644
--- a/packages/api/v1/api-documentation.tsx
+++ b/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} />;
 };
 
diff --git a/packages/ui/styles/theme.css b/packages/ui/styles/theme.css
index 70a06ad15..de1927f73 100644
--- a/packages/ui/styles/theme.css
+++ b/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);
+}
\ No newline at end of file