feat: added custom dark mode styling for swagger ui (#1022)

**Description:**

Updated the OpenAPI doc dark mode styling here
https://app.documenso.com/api/v1/openapi

**Before:**

<img width="1473" alt="Screenshot 2024-03-13 at 09 48 36"
src="https://github.com/documenso/documenso/assets/23498248/a4fa1fef-699f-40e9-a06d-e513fc786399">

**After:**

<img width="1471" alt="Screenshot 2024-03-13 at 12 40 08"
src="https://github.com/documenso/documenso/assets/23498248/39c606b5-ab8b-4031-9821-a57c8bb80b7d">

apps/web/src/components/(dashboard)/layout/menu-switcher.tsx

@@ -93,7 +93,7 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
         <Button
           data-testid="menu-switcher"
           variant="none"
-          className="relative flex h-12 flex-row items-center px-2 py-2 ring-0 focus-visible:border-0 focus-visible:ring-0"
+          className="relative flex h-12 flex-row items-center px-2 py-2 ring-0 focus:outline-none focus-visible:border-0 focus-visible:ring-0 focus-visible:ring-transparent"
         >
           <AvatarWithText
             avatarFallback={formatAvatarFallback(selectedTeam?.name)}

packages/api/v1/api-documentation.tsx

@@ -1,11 +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';
 
 export const OpenApiDocsPage = () => {
+  const { resolvedTheme } = useTheme();
+
+  useEffect(() => {
+    const body = document.body;
+
+    if (resolvedTheme === 'dark') {
+      body.classList.add('swagger-dark-theme');
+    } else {
+      body.classList.remove('swagger-dark-theme');
+    }
+
+    return () => {
+      body.classList.remove('swagger-dark-theme');
+    };
+  }, [resolvedTheme]);
+
   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);
+}