fix: use html data-theme to detect current

unionlabs · Nov 23, 2024 · 54e8192 · 54e8192
1 parent 71171a0
commit 54e8192
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git 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
@@ -51,7 +51,7 @@ interface Props {}
   height: 100% !important;
 }
 
-body.graphiql-dark {
+html[data-theme='dark'] {
   & .graphiql-toolbar,
   .graphiql-editor-tool,
   .graphiql-editor-tools,