3 files changed, 45 insertions, 11 deletions
diff --git a/playground/src/App.svelte b/playground/src/App.svelte
index dc4f0a5..350f956 100644
--- a/playground/src/App.svelte
+++ b/playground/src/App.svelte
@@ -1,24 +1,33 @@
 <script lang="ts">
   /*** IMPORT ------------------------------------------- ***/
 
-  import { createHttpFetcher } from "../../source/library/index.ts";
+  import { createHttpFetcher, lightTheme } from "../../source/library/index.ts";
   import GraphiQL from "../../source/library/GraphiQL.svelte";
 
   /*** UTILITY ------------------------------------------ ***/
 
   const fetcher = createHttpFetcher({
     url: "https://graphql.pokeapi.co/v1beta2"
-    // url: "https://countries.trevorblades.com/"
   });
 
-  const initialQuery = `query Countries {
-  countries {
-    code
-    name
-    emoji
-  }
-}
-`;
+  const initialQuery = `
+    query best_grass_poison_pokemons {
+      pokemon: pokemon(
+        where: {_and: [{pokemontypes: {type: {name: {_eq: "grass"}}}}, {pokemontypes: {type: {name: {_eq: "poison"}}}}]}
+        order_by: {pokemonstats_aggregate: {sum: {base_stat: desc}}}
+        limit: 3
+      ) {
+        name
+        stats: pokemonstats_aggregate(order_by: {}) {
+          aggregate {
+            sum {
+              base_stat
+            }
+          }
+        }
+      }
+    }
+  `;
 </script>
 
-<GraphiQL {fetcher} {initialQuery}/>
+<GraphiQL {fetcher} {initialQuery} theme={lightTheme}/>
diff --git a/playground/src/favicon.svg b/playground/src/favicon.svg
new file mode 100644
index 0000000..80a7a21
--- /dev/null
+++ b/playground/src/favicon.svg
@@ -0,0 +1,15 @@
+<svg fill="#e10098" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    svg {
+      fill: color(display-p3 0.8824 0 0.5961);
+    }
+  </style>
+
+  <path clip-rule="evenodd" d="M50 6.90308L87.323 28.4515V71.5484L50 93.0968L12.677 71.5484V28.4515L50 6.90308ZM16.8647 30.8693V62.5251L44.2795 15.0414L16.8647 30.8693ZM50 13.5086L18.3975 68.2457H81.6025L50 13.5086ZM77.4148 72.4334H22.5852L50 88.2613L77.4148 72.4334ZM83.1353 62.5251L55.7205 15.0414L83.1353 30.8693V62.5251Z" fill-rule="evenodd"/>
+  <circle cx="50" cy="9.3209" r="8.82"/>
+  <circle cx="85.2292" cy="29.6605" r="8.82"/>
+  <circle cx="85.2292" cy="70.3396" r="8.82"/>
+  <circle cx="50" cy="90.6791" r="8.82"/>
+  <circle cx="14.7659" cy="70.3396" r="8.82"/>
+  <circle cx="14.7659" cy="29.6605" r="8.82"/>
+</svg>
diff --git a/playground/src/main.ts b/playground/src/main.ts
index bf39df9..03a4c37 100644
--- a/playground/src/main.ts
+++ b/playground/src/main.ts
@@ -1,8 +1,18 @@
+
+
+
+/*** IMPORT ------------------------------------------- ***/
+
 import { mount } from "svelte";
+
+/*** UTILITY ------------------------------------------ ***/
+
 import App from "./App.svelte";
 
 const target = document.getElementById("app");
 
+/*** RUNTIME ------------------------------------------ ***/
+
 if (!target)
   throw new Error("missing #app target");