docs: add varied improvements (#5942)

apps/docs/src/components/integrations/widgets.tsx

@@ -32,7 +32,7 @@ export const IntegrationCapabilites = ({ items }: IntegrationCapabilitesProps) =
               className="flex gap-6 rounded-xl border border-solid dark:border-[#333] border-[#e5e7eb] p-4 shadow-sm w-full items-center justify-between"
             >
               <div className="flex gap-6 items-center">
-                <div className="w-10 h-10 flex justify-center items-center bg-red-500 bg-opacity-10 rounded-md">
+                <div className="w-10 h-10 flex justify-center items-center bg-red-500/10 rounded-md">
                   <capability.icon size={24} stroke={1.5} className="stroke-red-500" />
                 </div>
 

apps/docs/src/components/themed-api-reference.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import type { AnyApiReferenceConfiguration } from "@scalar/types/api-reference";
+import { ApiReferenceReact } from "@scalar/api-reference-react";
+import { useColorMode } from "@docusaurus/theme-common";
+
+import "@scalar/api-reference-react/style.css";
+
+export function ThemedApiReference({ configuration }: { configuration: AnyApiReferenceConfiguration }) {
+  const { colorMode } = useColorMode();
+
+  return (
+    <ApiReferenceReact
+      configuration={{
+        ...configuration,
+        forceDarkModeState: colorMode === "dark" ? "dark" : "light",
+      }}
+    />
+  );
+}

apps/docs/src/components/widgets/header.tsx

@@ -12,7 +12,7 @@ export const WidgetHeader = (props: WidgetHeaderProps) => {
       title={props.widget.name}
       description={props.widget.description}
       icon={
-        <div className="w-12 h-12 flex justify-center items-center bg-red-500 bg-opacity-10 rounded-md">
+        <div className="w-12 h-12 flex justify-center items-center bg-red-500/10 rounded-md">
           <props.widget.icon size={32} stroke={1.5} className="stroke-red-500" />
         </div>
       }