fix(graphiql-plugin): Make embedded mode background transparent (#4205)

packages/graphiql-plugin/src/ui/main.tsx

@@ -4,6 +4,14 @@ import ReactDOM from 'react-dom/client';
 import App from './App';
 import './styles.css';
 
+// Check for embedded mode and apply body classes
+const params = new URLSearchParams(window.location.search);
+const embeddedMode = params.get('embeddedMode') === 'true';
+
+if (embeddedMode) {
+    document.body.classList.add('embedded-mode', 'graphiql-dark');
+}
+
 // Get the API URL and name from the URL path
 const path = window.location.pathname;
 const isAdminApi = path.includes('/admin');

packages/graphiql-plugin/src/ui/overrides.css

@@ -1,7 +1,32 @@
+/* Embedded mode: transparent backgrounds for iframe embedding */
+/* Override GraphiQL's hsl(var(--color-base)) backgrounds with transparent */
+body.embedded-mode {
+    background: transparent !important;
+}
+
+body.embedded-mode .graphiql-app,
+body.embedded-mode .graphiql-wrapper {
+    background: transparent !important;
+}
+
+body.embedded-mode .graphiql-container {
+    background: transparent !important;
+}
+
+body.embedded-mode .graphiql-main,
+body.embedded-mode .graphiql-sessions,
+body.embedded-mode .graphiql-session,
+body.embedded-mode .graphiql-session-header,
+body.embedded-mode .graphiql-editors,
+body.embedded-mode .graphiql-response {
+    background: transparent !important;
+}
+
 .graphiql-container.embedded-mode {
     --sidebar-width: 0px;
     border-radius: var(--border-radius-12);
 }
+
 .graphiql-container.embedded-mode .graphiql-sidebar {
     padding: 0;
 }

packages/graphiql-plugin/src/ui/styles.css

@@ -1,9 +1,14 @@
-body {
+html, body {
     margin: 0;
     padding: 0;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 }
 
+body.embedded-mode,
+body.embedded-mode html {
+    background: transparent;
+}
+
 .graphiql-container {
     height: calc(100vh - 40px);
 }
@@ -50,3 +55,11 @@ body {
 .graphiql-wrapper {
     height: calc(100vh - 40px);
 }
+
+body.embedded-mode .graphiql-wrapper {
+    height: 100vh;
+}
+
+body.embedded-mode .graphiql-container {
+    height: 100vh;
+}