fix: graphiql light mode theme (#3294)

unionlabs · Dec 9, 2024 · 1586b46 · 1586b46
2 parents 135bd1b + 54e8192
commit 1586b46
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 28 deletions.
diff --git a/docs/public/scripts/graphiql-theme.js b/docs/public/scripts/graphiql-theme.js
@@ -0,0 +1,25 @@
+window.addEventListener("DOMContentLoaded", () => {
+  try {
+    const themeSwitchElement = document.querySelector("starlight-rapide-theme-select")
+    if (!themeSwitchElement) return
+
+    const switchButtonElement = themeSwitchElement.children.item(0)
+    if (!switchButtonElement) return
+
+    switchButtonElement.addEventListener("click", () => {
+      const newTheme = document.documentElement.getAttribute("data-theme")
+      const oldTheme = newTheme === "light" ? "dark" : "light"
+      if (!newTheme) return
+
+      if (document.body.classList.contains(`graphiql-${oldTheme}`)) {
+        document.body.classList.replace(`graphiql-${oldTheme}`, `graphiql-${newTheme}`)
+      } else document.body.classList.add(`graphiql-${newTheme}`)
+
+      if (document.documentElement.classList.contains(oldTheme)) {
+        document.documentElement.classList.replace(oldTheme, newTheme)
+      } else document.documentElement.classList.add(newTheme)
+    })
+  } catch {
+    /* empty */
+  }
+})
diff --git a/docs/src/components/graphiql/GraphiQL.astro b/docs/src/components/graphiql/GraphiQL.astro
@@ -33,7 +33,7 @@ interface Props {}
 </script>
 
 <style lang="postcss" is:global>
-  :root {
+:root {
   --sl-mobile-toc-height: 0;
   --color-base: #1f1f1f;
 }
@@ -44,41 +44,41 @@ interface Props {}
 
 .graphiql-execute-button {
   background-color: theme(colors.accent.500) !important;
-  & svg {
-    color: #1F1F1F !important;
-  }
 }
 
 .graphiql-horizontal-drag-bar {
   width: 2px !important;
   height: 100% !important;
-  background-color: #1f1f1f !important;
 }
 
-.graphiql-container,
-.graphiql-editors,
-.graphiql-editor,
-.graphiql-explorer,
-.graphiql-session,
-.graphiql-dialog {
-  background-color: #1f1f1f !important;
-}
+html[data-theme='dark'] {
+  & .graphiql-toolbar,
+  .graphiql-editor-tool,
+  .graphiql-editor-tools,
+  .CodeMirror-scroll,
+  .CodeMirror-gutter,
+  .graphiql-query-editor,
+  .graphiql-session,
+  .graphiql-session-header {
+    background-color: #131313 !important;
+  }
 
-.graphiql-toolbar,
-.graphiql-editor-tool,
-.graphiql-editor-tools,
-.CodeMirror-scroll,
-.CodeMirror-gutter,
-.graphiql-query-editor,
-.graphiql-session,
-.graphiql-session-header {
-  background-color: #131313 !important;
-}
+  & .graphiql-container,
+  .graphiql-editors,
+  .graphiql-editor,
+  .graphiql-explorer,
+  .graphiql-dialog,
+  .graphiql-horizontal-drag-bar {
+    background-color: #1f1f1f !important;
+  }
 
-.graphiql-query-editor {
-  /* padding: 0px !important; */
+  & .graphiql-execute-button svg {
+    color: #1F1F1F !important;
+  }
 }
 
+.graphiql-query-editor {}
+
 .graphiql-session {
   border-radius: 0 0 0.5rem 0.5rem;
 }
@@ -142,6 +142,7 @@ main[data-pagefind-body] {
   cursor: default !important;
   color: transparent !important;
   background: transparent !important;
+
   & svg {
     visibility: hidden !important;
     color: transparent !important;

diff --git a/docs/src/components/graphiql/setup.ts b/docs/src/components/graphiql/setup.ts
@@ -49,10 +49,8 @@ const graphiqlProps = {
     })
   ],
   disableTabs: true,
-  onEditVariables: variables => {
-    localStorage.setItem("graphiql:variables", variables)
-  },
   isHeadersEditorEnabled: true,
+  onEditVariables: variables => localStorage.setItem("graphiql:variables", variables),
   defaultEditorToolsVisibility: stringIsJSON(localStorage.getItem("graphiql:variables") ?? ""),
   toolbar: {
     additionalContent: [

diff --git a/docs/src/content/docs/reference/graphql.mdx b/docs/src/content/docs/reference/graphql.mdx
@@ -1,6 +1,10 @@
 ---
 title: 'GraphiQL'
 description: Union GraphQL API Playground
+head:
+  - tag: script
+    attrs:
+      src: /scripts/graphiql-theme.js
 ---
 import { GraphiQL } from '#/components/graphiql'