From 5dac546a5d57aa42b3a7b66079464520b5ce6e69 Mon Sep 17 00:00:00 2001
From: o-az <omaraziz.dev@proton.me>
Date: Fri, 22 Nov 2024 22:00:51 -0800
Subject: [PATCH 1/3] fix: graphiql light mode theme

---
 docs/public/scripts/graphiql-theme.js       | 23 ++++++++++
 docs/src/components/graphiql/GraphiQL.astro | 51 +++++++++++----------
 docs/src/components/graphiql/setup.ts       |  4 +-
 docs/src/content/docs/reference/graphql.mdx |  4 ++
 4 files changed, 54 insertions(+), 28 deletions(-)
 create mode 100644 docs/public/scripts/graphiql-theme.js

diff --git a/docs/public/scripts/graphiql-theme.js b/docs/public/scripts/graphiql-theme.js
new file mode 100644
index 0000000000..26575b95d7
--- /dev/null
+++ b/docs/public/scripts/graphiql-theme.js
@@ -0,0 +1,23 @@
+window.addEventListener("DOMContentLoaded", () => {
+  const themeSwitchElement = document.querySelector("starlight-rapide-theme-select")
+  if (!themeSwitchElement) return
+
+  const switchButtonElement = themeSwitchElement.children.item(0)
+  if (!switchButtonElement) return
+
+  switchButtonElement.addEventListener("click", event => {
+    try {
+      const newTheme = document.documentElement.getAttribute("data-theme")
+      const oldTheme = newTheme === "light" ? "dark" : "light"
+      if (!newTheme) return
+
+      document.body.classList.replace(`graphiql-${oldTheme}`, `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
index 94230558ad..428145ad1f 100644
--- 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;
-}
+body.graphiql-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
index 941e888d5e..d016fdc883 100644
--- 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
index c6c7b8637d..bc25ede6f8 100644
--- 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'
 

From 71171a07230664d8d433daddfe41a8b83402feeb Mon Sep 17 00:00:00 2001
From: o-az <omaraziz.dev@proton.me>
Date: Fri, 22 Nov 2024 22:01:45 -0800
Subject: [PATCH 2/3] chore: move try catch one level higher

---
 docs/public/scripts/graphiql-theme.js | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/docs/public/scripts/graphiql-theme.js b/docs/public/scripts/graphiql-theme.js
index 26575b95d7..4c7b0f965a 100644
--- a/docs/public/scripts/graphiql-theme.js
+++ b/docs/public/scripts/graphiql-theme.js
@@ -1,12 +1,12 @@
 window.addEventListener("DOMContentLoaded", () => {
-  const themeSwitchElement = document.querySelector("starlight-rapide-theme-select")
-  if (!themeSwitchElement) return
+  try {
+    const themeSwitchElement = document.querySelector("starlight-rapide-theme-select")
+    if (!themeSwitchElement) return
 
-  const switchButtonElement = themeSwitchElement.children.item(0)
-  if (!switchButtonElement) return
+    const switchButtonElement = themeSwitchElement.children.item(0)
+    if (!switchButtonElement) return
 
-  switchButtonElement.addEventListener("click", event => {
-    try {
+    switchButtonElement.addEventListener("click", event => {
       const newTheme = document.documentElement.getAttribute("data-theme")
       const oldTheme = newTheme === "light" ? "dark" : "light"
       if (!newTheme) return
@@ -16,8 +16,8 @@ window.addEventListener("DOMContentLoaded", () => {
       if (document.documentElement.classList.contains(oldTheme)) {
         document.documentElement.classList.replace(oldTheme, newTheme)
       } else document.documentElement.classList.add(newTheme)
-    } catch {
-      /* empty */
-    }
-  })
+    })
+  } catch {
+    /* empty */
+  }
 })

From 54e8192af536bb897d2b92c2e42d0d68d741dc2d Mon Sep 17 00:00:00 2001
From: o-az <omaraziz.dev@proton.me>
Date: Sat, 23 Nov 2024 08:30:10 -0800
Subject: [PATCH 3/3] fix: use html data-theme to detect current

---
 docs/public/scripts/graphiql-theme.js       | 6 ++++--
 docs/src/components/graphiql/GraphiQL.astro | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/docs/public/scripts/graphiql-theme.js b/docs/public/scripts/graphiql-theme.js
index 4c7b0f965a..b19fe787b9 100644
--- a/docs/public/scripts/graphiql-theme.js
+++ b/docs/public/scripts/graphiql-theme.js
@@ -6,12 +6,14 @@ window.addEventListener("DOMContentLoaded", () => {
     const switchButtonElement = themeSwitchElement.children.item(0)
     if (!switchButtonElement) return
 
-    switchButtonElement.addEventListener("click", event => {
+    switchButtonElement.addEventListener("click", () => {
       const newTheme = document.documentElement.getAttribute("data-theme")
       const oldTheme = newTheme === "light" ? "dark" : "light"
       if (!newTheme) return
 
-      document.body.classList.replace(`graphiql-${oldTheme}`, `graphiql-${newTheme}`)
+      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)
diff --git a/docs/src/components/graphiql/GraphiQL.astro b/docs/src/components/graphiql/GraphiQL.astro
index 428145ad1f..fe5ee8ee80 100644
--- a/docs/src/components/graphiql/GraphiQL.astro
+++ b/docs/src/components/graphiql/GraphiQL.astro
@@ -51,7 +51,7 @@ interface Props {}
   height: 100% !important;
 }
 
-body.graphiql-dark {
+html[data-theme='dark'] {
   & .graphiql-toolbar,
   .graphiql-editor-tool,
   .graphiql-editor-tools,