diff --git a/apps/nextjs/src/app/[locale]/manage/tools/api/components/scalar-api-reference.tsx b/apps/nextjs/src/app/[locale]/manage/tools/api/components/scalar-api-reference.tsx
index 459d8bba1..c4958d125 100644
--- a/apps/nextjs/src/app/[locale]/manage/tools/api/components/scalar-api-reference.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/tools/api/components/scalar-api-reference.tsx
@@ -4,29 +4,7 @@ import { useComputedColorScheme } from "@mantine/core";
 import { ApiReferenceReact } from "@scalar/api-reference-react";
 
 import "@scalar/api-reference-react/style.css";
-
-const customCss = `
-  .light-mode {
-    --scalar-background-1: var(--mantine-color-body);
-    --scalar-background-2: var(--mantine-color-gray-0);
-    --scalar-background-3: var(--mantine-color-gray-1);
-    --scalar-color-1: var(--mantine-color-text);
-    --scalar-color-2: var(--mantine-color-dimmed);
-    --scalar-color-3: var(--mantine-color-dimmed);
-    --scalar-color-accent: var(--mantine-color-red-6);
-    --scalar-border-color: var(--mantine-color-gray-3);
-  }
-  .dark-mode {
-    --scalar-background-1: var(--mantine-color-body);
-    --scalar-background-2: var(--mantine-color-dark-6);
-    --scalar-background-3: var(--mantine-color-dark-5);
-    --scalar-color-1: var(--mantine-color-text);
-    --scalar-color-2: var(--mantine-color-dimmed);
-    --scalar-color-3: var(--mantine-color-dimmed);
-    --scalar-color-accent: var(--mantine-color-red-6);
-    --scalar-border-color: var(--mantine-color-dark-4);
-  }
-`;
+import "./scalar-theme.css";
 
 interface ScalarApiReferenceProps {
   document: object;
@@ -48,7 +26,6 @@ export function ScalarApiReference({ document }: ScalarApiReferenceProps) {
         showDeveloperTools: "never",
         defaultOpenAllTags: true,
         forceDarkModeState: colorScheme,
-        customCss,
         authentication: {
           preferredSecurityScheme: "apikey",
         },
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/api/components/scalar-theme.css b/apps/nextjs/src/app/[locale]/manage/tools/api/components/scalar-theme.css
new file mode 100644
index 000000000..23e7b2c96
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/tools/api/components/scalar-theme.css
@@ -0,0 +1,21 @@
+.light-mode {
+  --scalar-background-1: var(--mantine-color-body);
+  --scalar-background-2: var(--mantine-color-gray-0);
+  --scalar-background-3: var(--mantine-color-gray-1);
+  --scalar-color-1: var(--mantine-color-text);
+  --scalar-color-2: var(--mantine-color-dimmed);
+  --scalar-color-3: var(--mantine-color-dimmed);
+  --scalar-color-accent: var(--mantine-color-red-6);
+  --scalar-border-color: var(--mantine-color-gray-3);
+}
+
+.dark-mode {
+  --scalar-background-1: var(--mantine-color-body);
+  --scalar-background-2: var(--mantine-color-dark-6);
+  --scalar-background-3: var(--mantine-color-dark-5);
+  --scalar-color-1: var(--mantine-color-text);
+  --scalar-color-2: var(--mantine-color-dimmed);
+  --scalar-color-3: var(--mantine-color-dimmed);
+  --scalar-color-accent: var(--mantine-color-red-6);
+  --scalar-border-color: var(--mantine-color-dark-4);
+}