@tanstack/query-devtools 5.0.0-rc.5 → 5.0.0

package/build/Devtools/{336SHOD5.jsx → OWSLDUSP.jsx}

@@ -9478,6 +9478,19 @@ var sortFns = {
 var convertRemToPixels = (rem) => {
   return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
 };
+var getPreferredColorScheme = () => {
+  const [colorScheme, setColorScheme] = createSignal("dark");
+  onMount(() => {
+    const query = window.matchMedia("(prefers-color-scheme: dark)");
+    setColorScheme(query.matches ? "dark" : "light");
+    const listener = (e2) => {
+      setColorScheme(e2.matches ? "dark" : "light");
+    };
+    query.addEventListener("change", listener);
+    onCleanup(() => query.removeEventListener("change", listener));
+  });
+  return colorScheme;
+};
 var updateNestedDataByPath = (oldData, updatePath2, value) => {
   if (updatePath2.length === 0) {
     return value;
@@ -9569,7 +9582,7 @@ function Search() {
     xmlns="http://www.w3.org/2000/svg"
   ><path
     d="M13 13L9.00007 9M10.3333 5.66667C10.3333 8.244 8.244 10.3333 5.66667 10.3333C3.08934 10.3333 1 8.244 1 5.66667C1 3.08934 3.08934 1 5.66667 1C8.244 1 10.3333 3.08934 10.3333 5.66667Z"
-    stroke="#98A2B3"
+    stroke="currentColor"
     stroke-width="1.66667"
     stroke-linecap="round"
     stroke-linejoin="round"
@@ -9584,8 +9597,8 @@ function Trash() {
     xmlns="http://www.w3.org/2000/svg"
   ><path
     d="M9 3H15M3 6H21M19 6L18.2987 16.5193C18.1935 18.0975 18.1409 18.8867 17.8 19.485C17.4999 20.0118 17.0472 20.4353 16.5017 20.6997C15.882 21 15.0911 21 13.5093 21H10.4907C8.90891 21 8.11803 21 7.49834 20.6997C6.95276 20.4353 6.50009 20.0118 6.19998 19.485C5.85911 18.8867 5.8065 18.0975 5.70129 16.5193L5 6M10 10.5V15.5M14 10.5V15.5"
-    stroke="#d0d5dd"
-    stroke-width="1.66667"
+    stroke="currentColor"
+    stroke-width="2"
     stroke-linecap="round"
     stroke-linejoin="round"
   /></svg>;
@@ -9599,7 +9612,7 @@ function ChevronDown() {
     xmlns="http://www.w3.org/2000/svg"
   ><path
     d="M1 1L5 5L9 1"
-    stroke="#98A2B3"
+    stroke="currentColor"
     stroke-width="1.66667"
     stroke-linecap="round"
     stroke-linejoin="round"
@@ -9614,7 +9627,7 @@ function ArrowUp() {
     xmlns="http://www.w3.org/2000/svg"
   ><path
     d="M8 13.3333V2.66667M8 2.66667L4 6.66667M8 2.66667L12 6.66667"
-    stroke="#98A2B3"
+    stroke="currentColor"
     stroke-width="1.66667"
     stroke-linecap="round"
     stroke-linejoin="round"
@@ -9629,7 +9642,7 @@ function ArrowDown() {
     xmlns="http://www.w3.org/2000/svg"
   ><path
     d="M8 2.66667V13.3333M8 13.3333L4 9.33333M8 13.3333L12 9.33333"
-    stroke="#98A2B3"
+    stroke="currentColor"
     stroke-width="1.66667"
     stroke-linecap="round"
     stroke-linejoin="round"
@@ -9647,7 +9660,7 @@ function ArrowLeft() {
     }}
   ><path
     d="M8 2.66667V13.3333M8 13.3333L4 9.33333M8 13.3333L12 9.33333"
-    stroke="#98A2B3"
+    stroke="currentColor"
     stroke-width="1.66667"
     stroke-linecap="round"
     stroke-linejoin="round"
@@ -9665,16 +9678,61 @@ function ArrowRight() {
     }}
   ><path
     d="M8 2.66667V13.3333M8 13.3333L4 9.33333M8 13.3333L12 9.33333"
-    stroke="#98A2B3"
+    stroke="currentColor"
     stroke-width="1.66667"
     stroke-linecap="round"
     stroke-linejoin="round"
   /></svg>;
 }
+function Sun() {
+  return <svg
+    viewBox="0 0 24 24"
+    height="12"
+    width="12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  ><path
+    d="M12 2v2m0 16v2M4 12H2m4.314-5.686L4.9 4.9m12.786 1.414L19.1 4.9M6.314 17.69 4.9 19.104m12.786-1.414 1.414 1.414M22 12h-2m-3 0a5 5 0 1 1-10 0 5 5 0 0 1 10 0Z"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  /></svg>;
+}
+function Moon() {
+  return <svg
+    viewBox="0 0 24 24"
+    height="12"
+    width="12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  ><path
+    d="M22 15.844a10.424 10.424 0 0 1-4.306.925c-5.779 0-10.463-4.684-10.463-10.462 0-1.536.33-2.994.925-4.307A10.464 10.464 0 0 0 2 11.538C2 17.316 6.684 22 12.462 22c4.243 0 7.896-2.526 9.538-6.156Z"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  /></svg>;
+}
+function Monitor() {
+  return <svg
+    viewBox="0 0 24 24"
+    height="12"
+    width="12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  ><path
+    d="M8 21h8m-4-4v4m-5.2-4h10.4c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.311-1.311C22 14.72 22 13.88 22 12.2V7.8c0-1.68 0-2.52-.327-3.162a3 3 0 0 0-1.311-1.311C19.72 3 18.88 3 17.2 3H6.8c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.311 1.311C2 5.28 2 6.12 2 7.8v4.4c0 1.68 0 2.52.327 3.162a3 3 0 0 0 1.311 1.311C4.28 17 5.12 17 6.8 17Z"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  /></svg>;
+}
 function Wifi() {
   return <svg
-    stroke="#d0d5dd"
-    fill="#d0d5dd"
+    stroke="currentColor"
+    fill="currentColor"
     stroke-width="0"
     viewBox="0 0 24 24"
     height="1em"
@@ -9687,8 +9745,6 @@ function Wifi() {
 }
 function Offline() {
   return <svg
-    stroke={tokens.colors.yellow[500]}
-    fill={tokens.colors.yellow[500]}
     stroke-width="0"
     viewBox="0 0 24 24"
     height="1em"
@@ -9712,14 +9768,14 @@ function Settings() {
   >
     <path
       d="M9.3951 19.3711L9.97955 20.6856C10.1533 21.0768 10.4368 21.4093 10.7958 21.6426C11.1547 21.8759 11.5737 22.0001 12.0018 22C12.4299 22.0001 12.8488 21.8759 13.2078 21.6426C13.5667 21.4093 13.8503 21.0768 14.024 20.6856L14.6084 19.3711C14.8165 18.9047 15.1664 18.5159 15.6084 18.26C16.0532 18.0034 16.5678 17.8941 17.0784 17.9478L18.5084 18.1C18.9341 18.145 19.3637 18.0656 19.7451 17.8713C20.1265 17.6771 20.4434 17.3763 20.6573 17.0056C20.8715 16.635 20.9735 16.2103 20.9511 15.7829C20.9286 15.3555 20.7825 14.9438 20.5307 14.5978L19.684 13.4344C19.3825 13.0171 19.2214 12.5148 19.224 12C19.2239 11.4866 19.3865 10.9864 19.6884 10.5711L20.5351 9.40778C20.787 9.06175 20.933 8.65007 20.9555 8.22267C20.978 7.79528 20.8759 7.37054 20.6618 7C20.4479 6.62923 20.131 6.32849 19.7496 6.13423C19.3681 5.93997 18.9386 5.86053 18.5129 5.90556L17.0829 6.05778C16.5722 6.11141 16.0577 6.00212 15.6129 5.74556C15.17 5.48825 14.82 5.09736 14.6129 4.62889L14.024 3.31444C13.8503 2.92317 13.5667 2.59072 13.2078 2.3574C12.8488 2.12408 12.4299 1.99993 12.0018 2C11.5737 1.99993 11.1547 2.12408 10.7958 2.3574C10.4368 2.59072 10.1533 2.92317 9.97955 3.31444L9.3951 4.62889C9.18803 5.09736 8.83798 5.48825 8.3951 5.74556C7.95032 6.00212 7.43577 6.11141 6.9251 6.05778L5.49066 5.90556C5.06499 5.86053 4.6354 5.93997 4.25397 6.13423C3.87255 6.32849 3.55567 6.62923 3.34177 7C3.12759 7.37054 3.02555 7.79528 3.04804 8.22267C3.07052 8.65007 3.21656 9.06175 3.46844 9.40778L4.3151 10.5711C4.61704 10.9864 4.77964 11.4866 4.77955 12C4.77964 12.5134 4.61704 13.0137 4.3151 13.4289L3.46844 14.5922C3.21656 14.9382 3.07052 15.3499 3.04804 15.7773C3.02555 16.2047 3.12759 16.6295 3.34177 17C3.55589 17.3706 3.8728 17.6712 4.25417 17.8654C4.63554 18.0596 5.06502 18.1392 5.49066 18.0944L6.92066 17.9422C7.43133 17.8886 7.94587 17.9979 8.39066 18.2544C8.83519 18.511 9.18687 18.902 9.3951 19.3711Z"
-      stroke="#d0d5dd"
+      stroke="currentColor"
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
     />
     <path
       d="M12 15C13.6568 15 15 13.6569 15 12C15 10.3431 13.6568 9 12 9C10.3431 9 8.99998 10.3431 8.99998 12C8.99998 13.6569 10.3431 15 12 15Z"
-      stroke="#d0d5dd"
+      stroke="currentColor"
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
@@ -9739,10 +9795,10 @@ function Copier() {
     stroke-width="2"
     stroke-linecap="round"
     stroke-linejoin="round"
-    stroke="#98A2B3"
+    stroke="currentColor"
   /></svg>;
 }
-function CopiedCopier() {
+function CopiedCopier(props) {
   return <svg
     width="24"
     height="24"
@@ -9751,7 +9807,7 @@ function CopiedCopier() {
     xmlns="http://www.w3.org/2000/svg"
   ><path
     d="M7.5 12L10.5 15L16.5 9M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z"
-    stroke="#12B76A"
+    stroke={props.theme === "dark" ? "#12B76A" : "#027A48"}
     stroke-width="2"
     stroke-linecap="round"
     stroke-linejoin="round"
@@ -9778,7 +9834,7 @@ function List() {
     height="24"
     viewBox="0 0 24 24"
     fill="none"
-    stroke="#98A2B3"
+    stroke="currentColor"
     stroke-width="2"
     xmlns="http://www.w3.org/2000/svg"
   >
@@ -9788,6 +9844,36 @@ function List() {
     <line class="list-item" y1="17" y2="17" x1="6" x2="18" />
   </svg>;
 }
+function Check(props) {
+  return <>
+    <Show when={props.checked}><svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    ><path
+      d="M7.5 12L10.5 15L16.5 9M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z"
+      stroke={props.theme === "dark" ? "#9B8AFB" : "#6938EF"}
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    /></svg></Show>
+    <Show when={!props.checked}><svg
+      viewBox="0 0 24 24"
+      height="20"
+      width="20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    ><path
+      d="M3 7.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C5.28 3 6.12 3 7.8 3h8.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C21 5.28 21 6.12 21 7.8v8.4c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C18.72 21 17.88 21 16.2 21H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 18.72 3 17.88 3 16.2V7.8Z"
+      stroke={props.theme === "dark" ? "#9B8AFB" : "#6938EF"}
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    /></svg></Show>
+  </>;
+}
 function TanstackLogo() {
   return <svg version="1.0" viewBox="0 0 633 633">
     <linearGradient
@@ -10514,6 +10600,12 @@ var QueryDevtoolsContext = createContext({
 function useQueryDevtoolsContext() {
   return useContext(QueryDevtoolsContext);
 }
+var ThemeContext = createContext(
+  () => "dark"
+);
+function useTheme() {
+  return useContext(ThemeContext);
+}
 
 // src/Explorer.tsx
 function chunkArray(array, size2) {
@@ -10528,10 +10620,13 @@ function chunkArray(array, size2) {
   return result;
 }
 var Expander = (props) => {
-  const styles = getStyles();
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles : lightStyles;
+  });
   return <span
     class={clsx(
-      styles.expander,
+      styles().expander,
       u`
           transform: rotate(${props.expanded ? 90 : 0}deg);
         `,
@@ -10555,10 +10650,13 @@ var Expander = (props) => {
   /></svg></span>;
 };
 var CopyButton = (props) => {
-  const styles = getStyles();
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles : lightStyles;
+  });
   const [copyState, setCopyState] = createSignal("NoCopy");
   return <button
-    class={styles.actionButton}
+    class={styles().actionButton}
     title="Copy object to clipboard"
     aria-label={`${copyState() === "NoCopy" ? "Copy object to clipboard" : copyState() === "SuccessCopy" ? "Object copied to clipboard" : "Error copying object to clipboard"}`}
     onClick={copyState() === "NoCopy" ? () => {
@@ -10580,15 +10678,18 @@ var CopyButton = (props) => {
     } : void 0}
   ><Switch>
     <Match when={copyState() === "NoCopy"}><Copier /></Match>
-    <Match when={copyState() === "SuccessCopy"}><CopiedCopier /></Match>
+    <Match when={copyState() === "SuccessCopy"}><CopiedCopier theme={theme()} /></Match>
     <Match when={copyState() === "ErrorCopy"}><ErrorCopier /></Match>
   </Switch></button>;
 };
 var ClearArrayButton = (props) => {
-  const styles = getStyles();
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles : lightStyles;
+  });
   const queryClient = useQueryDevtoolsContext().client;
   return <button
-    class={styles.actionButton}
+    class={styles().actionButton}
     title="Remove all items"
     aria-label="Remove all items"
     onClick={() => {
@@ -10599,10 +10700,13 @@ var ClearArrayButton = (props) => {
   ><List /></button>;
 };
 var DeleteItemButton = (props) => {
-  const styles = getStyles();
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles : lightStyles;
+  });
   const queryClient = useQueryDevtoolsContext().client;
   return <button
-    class={clsx(styles.actionButton)}
+    class={clsx(styles().actionButton)}
     title="Delete item"
     aria-label="Delete item"
     onClick={() => {
@@ -10612,11 +10716,41 @@ var DeleteItemButton = (props) => {
     }}
   ><Trash /></button>;
 };
+var ToggleValueButton = (props) => {
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles : lightStyles;
+  });
+  const queryClient = useQueryDevtoolsContext().client;
+  return <button
+    class={clsx(
+      styles().actionButton,
+      u`
+          width: ${tokens.size[3.5]};
+          height: ${tokens.size[3.5]};
+        `
+    )}
+    title="Toggle value"
+    aria-label="Toggle value"
+    onClick={() => {
+      const oldData = props.activeQuery.state.data;
+      const newData = updateNestedDataByPath(
+        oldData,
+        props.dataPath,
+        !props.value
+      );
+      queryClient.setQueryData(props.activeQuery.queryKey, newData);
+    }}
+  ><Check theme={theme()} checked={props.value} /></button>;
+};
 function isIterable(x) {
   return Symbol.iterator in x;
 }
 function Explorer(props) {
-  const styles = getStyles();
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles : lightStyles;
+  });
   const queryClient = useQueryDevtoolsContext().client;
   const [expanded, setExpanded] = createSignal(
     (props.defaultExpanded || []).includes(props.label)
@@ -10660,25 +10794,25 @@ function Explorer(props) {
   });
   const subEntryPages = createMemo(() => chunkArray(subEntries(), 100));
   const currentDataPath = props.dataPath ?? [];
-  return <div class={styles.entry}>
+  return <div class={styles().entry}>
     <Show when={subEntryPages().length}>
-      <div class={styles.expanderButtonContainer}>
+      <div class={styles().expanderButtonContainer}>
         <button
-          class={styles.expanderButton}
+          class={styles().expanderButton}
           onClick={() => toggleExpanded()}
         >
           <Expander expanded={expanded()} />
           {" "}
           <span>{props.label}</span>
           {" "}
-          <span class={styles.info}>
+          <span class={styles().info}>
             {String(type()).toLowerCase() === "iterable" ? "(Iterable) " : ""}
             {subEntries().length}
             {" "}
             {subEntries().length > 1 ? `items` : `item`}
           </span>
         </button>
-        <Show when={props.editable}><div class={styles.actions}>
+        <Show when={props.editable}><div class={styles().actions}>
           <CopyButton value={props.value} />
           <Show
             when={props.itemsDeletable && props.activeQuery !== void 0}
@@ -10695,7 +10829,7 @@ function Explorer(props) {
         </div></Show>
       </div>
       <Show when={expanded()}>
-        <Show when={subEntryPages().length === 1}><div class={styles.subEntry}><Key each={subEntries()} by={(item) => item.label}>{(entry) => {
+        <Show when={subEntryPages().length === 1}><div class={styles().subEntry}><Key each={subEntries()} by={(item) => item.label}>{(entry) => {
           return <Explorer
             defaultExpanded={props.defaultExpanded}
             label={entry().label}
@@ -10706,12 +10840,12 @@ function Explorer(props) {
             itemsDeletable={type() === "array" || type() === "Iterable" || type() === "object"}
           />;
         }}</Key></div></Show>
-        <Show when={subEntryPages().length > 1}><div class={styles.subEntry}><Index each={subEntryPages()}>{(entries3, index) => <div><div class={styles.entry}>
+        <Show when={subEntryPages().length > 1}><div class={styles().subEntry}><Index each={subEntryPages()}>{(entries3, index) => <div><div class={styles().entry}>
           <button
             onClick={() => setExpandedPages(
               (old) => old.includes(index) ? old.filter((d) => d !== index) : [...old, index]
             )}
-            class={styles.expanderButton}
+            class={styles().expanderButton}
           >
             <Expander expanded={expandedPages().includes(index)} />
             {" "}
@@ -10721,7 +10855,7 @@ function Explorer(props) {
             {index * 100 + 100 - 1}
             {"]"}
           </button>
-          <Show when={expandedPages().includes(index)}><div class={styles.subEntry}><Key each={entries3()} by={(entry) => entry.label}>{(entry) => <Explorer
+          <Show when={expandedPages().includes(index)}><div class={styles().subEntry}><Key each={entries3()} by={(entry) => entry.label}>{(entry) => <Explorer
             defaultExpanded={props.defaultExpanded}
             label={entry().label}
             value={entry().value}
@@ -10732,28 +10866,46 @@ function Explorer(props) {
         </div></div>}</Index></div></Show>
       </Show>
     </Show>
-    <Show when={subEntryPages().length === 0}><div class={styles.row}>
-      <span class={styles.label}>
+    <Show when={subEntryPages().length === 0}><div class={styles().row}>
+      <span class={styles().label}>
         {props.label}
         {":"}
       </span>
       <Show
-        when={props.editable && props.activeQuery !== void 0 && (type() === "string" || type() === "number")}
-        fallback={<span class={styles.value}>{displayValue(props.value)}</span>}
-      ><input
-        type={type() === "number" ? "number" : "text"}
-        class={clsx(styles.value, styles.editableInput)}
-        value={props.value}
-        onChange={(changeEvent) => {
-          const oldData = props.activeQuery.state.data;
-          const newData = updateNestedDataByPath(
-            oldData,
-            currentDataPath,
-            type() === "number" ? changeEvent.target.valueAsNumber : changeEvent.target.value
-          );
-          queryClient.setQueryData(props.activeQuery.queryKey, newData);
-        }}
-      /></Show>
+        when={props.editable && props.activeQuery !== void 0 && (type() === "string" || type() === "number" || type() === "boolean")}
+        fallback={<span class={styles().value}>{displayValue(props.value)}</span>}
+      >
+        <Show
+          when={props.editable && props.activeQuery !== void 0 && (type() === "string" || type() === "number")}
+        ><input
+          type={type() === "number" ? "number" : "text"}
+          class={clsx(styles().value, styles().editableInput)}
+          value={props.value}
+          onChange={(changeEvent) => {
+            const oldData = props.activeQuery.state.data;
+            const newData = updateNestedDataByPath(
+              oldData,
+              currentDataPath,
+              type() === "number" ? changeEvent.target.valueAsNumber : changeEvent.target.value
+            );
+            queryClient.setQueryData(props.activeQuery.queryKey, newData);
+          }}
+        /></Show>
+        <Show when={type() === "boolean"}><span
+          class={clsx(
+            styles().value,
+            styles().actions,
+            styles().editableInput
+          )}
+        >
+          <ToggleValueButton
+            activeQuery={props.activeQuery}
+            dataPath={currentDataPath}
+            value={props.value}
+          />
+          {displayValue(props.value)}
+        </span></Show>
+      </Show>
       <Show
         when={props.editable && props.itemsDeletable && props.activeQuery !== void 0}
       ><DeleteItemButton
@@ -10763,8 +10915,9 @@ function Explorer(props) {
     </div></Show>
   </div>;
 }
-var getStyles = () => {
+var stylesFactory = (theme) => {
   const { colors, font, size: size2, border } = tokens;
+  const t2 = (light, dark) => theme === "light" ? light : dark;
   return {
     entry: u`
       & * {
@@ -10778,7 +10931,7 @@ var getStyles = () => {
     subEntry: u`
       margin: 0 0 0 0.5em;
       padding-left: 0.75em;
-      border-left: 2px solid ${colors.darkGray[400]};
+      border-left: 2px solid ${t2(colors.gray[300], colors.darkGray[400])};
       /* outline: 1px solid ${colors.teal[400]}; */
     `,
     expander: u`
@@ -10827,21 +10980,22 @@ var getStyles = () => {
       }
     `,
     info: u`
-      color: ${colors.gray[500]};
+      color: ${t2(colors.gray[500], colors.gray[500])};
       font-size: ${font.size.xs};
       margin-left: ${size2[1]};
       /* outline: 1px solid ${colors.yellow[400]}; */
     `,
     label: u`
-      color: ${colors.gray[300]};
+      color: ${t2(colors.gray[700], colors.gray[300])};
     `,
     value: u`
-      color: ${colors.purple[400]};
+      color: ${t2(colors.purple[600], colors.purple[400])};
       flex-grow: 1;
     `,
     actions: u`
       display: inline-flex;
       gap: ${size2[2]};
+      align-items: center;
     `,
     row: u`
       display: inline-flex;
@@ -10849,19 +11003,22 @@ var getStyles = () => {
       width: 100%;
       margin-bottom: ${size2[0.5]};
       line-height: 1.125rem;
+      align-items: center;
     `,
     editableInput: u`
       border: none;
-      padding: 0px ${size2[1]};
+      padding: ${size2[0.5]} ${size2[1]} ${size2[0.5]} ${size2[1.5]};
       flex-grow: 1;
-      background-color: ${colors.gray[900]};
+      border-radius: ${border.radius.xs};
+      background-color: ${t2(colors.gray[200], colors.darkGray[500])};
 
       &:hover {
-        background-color: ${colors.gray[800]};
+        background-color: ${t2(colors.gray[300], colors.darkGray[600])};
       }
     `,
     actionButton: u`
       background-color: transparent;
+      color: ${t2(colors.gray[500], colors.gray[500])};
       border: none;
       display: inline-flex;
       padding: 0px;
@@ -10874,14 +11031,7 @@ var getStyles = () => {
       z-index: 1;
 
       &:hover svg {
-        .copier,
-        .list {
-          stroke: ${colors.gray[500]} !important;
-        }
-
-        .list-item {
-          stroke: ${colors.gray[700]};
-        }
+        color: ${t2(colors.gray[600], colors.gray[400])};
       }
 
       &:focus-visible {
@@ -10892,6 +11042,8 @@ var getStyles = () => {
     `
   };
 };
+var lightStyles = stylesFactory("light");
+var darkStyles = stylesFactory("dark");
 
 // src/fonts.ts
 var loadFonts = () => {
@@ -10907,6 +11059,7 @@ var secondBreakpoint = 796;
 var thirdBreakpoint = 700;
 var BUTTON_POSITION = "bottom-right";
 var POSITION = "bottom";
+var THEME_PREFERENCE = "system";
 var INITIAL_IS_OPEN = false;
 var DEFAULT_HEIGHT = 500;
 var DEFAULT_WIDTH = 500;
@@ -10917,28 +11070,38 @@ var [selectedQueryHash, setSelectedQueryHash] = createSignal(
 );
 var [panelWidth, setPanelWidth] = createSignal(0);
 var DevtoolsComponent = (props) => {
-  return <QueryDevtoolsContext.Provider value={props}><Devtools /></QueryDevtoolsContext.Provider>;
+  const [localStore, setLocalStore] = createLocalStorage({
+    prefix: "TanstackQueryDevtools"
+  });
+  const colorScheme = getPreferredColorScheme();
+  const theme = createMemo(() => {
+    const preference = localStore.theme_preference || THEME_PREFERENCE;
+    if (preference !== "system")
+      return preference;
+    return colorScheme();
+  });
+  return <QueryDevtoolsContext.Provider value={props}><ThemeContext.Provider value={theme}><Devtools localStore={localStore} setLocalStore={setLocalStore} /></ThemeContext.Provider></QueryDevtoolsContext.Provider>;
 };
 var Devtools_default = DevtoolsComponent;
-var Devtools = () => {
+var Devtools = (props) => {
   loadFonts();
-  const styles = getStyles2();
-  const [localStore, setLocalStore] = createLocalStorage({
-    prefix: "TanstackQueryDevtools"
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles2 : lightStyles2;
   });
   const buttonPosition = createMemo(() => {
     return useQueryDevtoolsContext().buttonPosition || BUTTON_POSITION;
   });
   const isOpen = createMemo(() => {
-    return localStore.open === "true" ? true : localStore.open === "false" ? false : useQueryDevtoolsContext().initialIsOpen || INITIAL_IS_OPEN;
+    return props.localStore.open === "true" ? true : props.localStore.open === "false" ? false : useQueryDevtoolsContext().initialIsOpen || INITIAL_IS_OPEN;
   });
   const position = createMemo(() => {
-    return localStore.position || useQueryDevtoolsContext().position || POSITION;
+    return props.localStore.position || useQueryDevtoolsContext().position || POSITION;
   });
   createEffect(() => {
     const root = document.querySelector(".tsqd-parent-container");
-    const height = localStore.height || DEFAULT_HEIGHT;
-    const width = localStore.width || DEFAULT_WIDTH;
+    const height = props.localStore.height || DEFAULT_HEIGHT;
+    const width = props.localStore.width || DEFAULT_WIDTH;
     const panelPosition = position();
     root.style.setProperty(
       "--tsqd-panel-height",
@@ -10976,25 +11139,28 @@ var Devtools = () => {
     )}
   >
     <TransitionGroup name="tsqd-panel-transition"><Show when={isOpen()}><DevtoolsPanel
-      localStore={localStore}
-      setLocalStore={setLocalStore}
+      localStore={props.localStore}
+      setLocalStore={props.setLocalStore}
     /></Show></TransitionGroup>
     <TransitionGroup name="tsqd-button-transition"><Show when={!isOpen()}><div
       class={clsx(
-        styles.devtoolsBtn,
-        styles[`devtoolsBtn-position-${buttonPosition()}`]
+        styles().devtoolsBtn,
+        styles()[`devtoolsBtn-position-${buttonPosition()}`]
       )}
     >
       <div aria-hidden="true"><TanstackLogo /></div>
       <button
         aria-label="Open Tanstack query devtools"
-        onClick={() => setLocalStore("open", "true")}
+        onClick={() => props.setLocalStore("open", "true")}
       ><TanstackLogo /></button>
     </div></Show></TransitionGroup>
   </div>;
 };
 var DevtoolsPanel = (props) => {
-  const styles = getStyles2();
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles2 : lightStyles2;
+  });
   const [isResizing, setIsResizing] = createSignal(false);
   const sort = createMemo(() => props.localStore.sort || DEFAULT_SORT_FN_NAME);
   const sortOrder = createMemo(
@@ -11111,14 +11277,25 @@ var DevtoolsPanel = (props) => {
       });
     });
   });
+  const getPanelDynamicStyles = () => {
+    const { colors } = tokens;
+    const t2 = (light, dark) => theme() === "dark" ? dark : light;
+    if (panelWidth() < secondBreakpoint) {
+      return u`
+        flex-direction: column;
+        background-color: ${t2(colors.gray[300], colors.gray[600])};
+      `;
+    }
+    return u`
+      flex-direction: row;
+      background-color: ${t2(colors.gray[200], colors.darkGray[900])};
+    `;
+  };
   return <aside
     class={clsx(
-      styles.panel,
-      styles[`panel-position-${position()}`],
-      u`
-          flex-direction: ${panelWidth() < secondBreakpoint ? "column" : "row"};
-          background-color: ${panelWidth() < secondBreakpoint ? tokens.colors.gray[600] : tokens.colors.darkGray[900]};
-        `,
+      styles().panel,
+      styles()[`panel-position-${position()}`],
+      getPanelDynamicStyles(),
       {
         [u`
             min-width: min-content;
@@ -11135,8 +11312,8 @@ var DevtoolsPanel = (props) => {
   >
     <div
       class={clsx(
-        styles.dragHandle,
-        styles[`dragHandle-position-${position()}`],
+        styles().dragHandle,
+        styles()[`dragHandle-position-${position()}`],
         "tsqd-drag-handle"
       )}
       onMouseDown={handleDragStart}
@@ -11144,8 +11321,8 @@ var DevtoolsPanel = (props) => {
     <button
       aria-label="Close tanstack query devtools"
       class={clsx(
-        styles.closeBtn,
-        styles[`closeBtn-position-${position()}`],
+        styles().closeBtn,
+        styles()[`closeBtn-position-${position()}`],
         "tsqd-minimize-btn"
       )}
       onClick={() => props.setLocalStore("open", "false")}
@@ -11153,7 +11330,7 @@ var DevtoolsPanel = (props) => {
     <div
       ref={queriesContainerRef}
       class={clsx(
-        styles.queriesContainer,
+        styles().queriesContainer,
         panelWidth() < secondBreakpoint && selectedQueryHash() && u`
               height: 50%;
               max-height: 50%;
@@ -11161,15 +11338,18 @@ var DevtoolsPanel = (props) => {
         "tsqd-queries-container"
       )}
     >
-      <div class={clsx(styles.row, "tsqd-header")}>
+      <div class={clsx(styles().row, "tsqd-header")}>
         <button
-          class={clsx(styles.logo, "tsqd-text-logo-container")}
+          class={clsx(styles().logo, "tsqd-text-logo-container")}
           onClick={() => props.setLocalStore("open", "false")}
           aria-label="Close Tanstack query devtools"
         >
-          <span class={clsx(styles.tanstackLogo, "tsqd-text-logo-tanstack")}>TANSTACK</span>
+          <span class={clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack")}>TANSTACK</span>
           <span
-            class={clsx(styles.queryFlavorLogo, "tsqd-text-logo-query-flavor")}
+            class={clsx(
+              styles().queryFlavorLogo,
+              "tsqd-text-logo-query-flavor"
+            )}
           >
             {useQueryDevtoolsContext().queryFlavor}
             {" v"}
@@ -11180,17 +11360,17 @@ var DevtoolsPanel = (props) => {
       </div>
       <div
         class={clsx(
-          styles.row,
+          styles().row,
           u`
               gap: ${tokens.size[2.5]};
             `,
           "tsqd-filters-actions-container"
         )}
       >
-        <div class={clsx(styles.filtersContainer, "tsqd-filters-container")}>
+        <div class={clsx(styles().filtersContainer, "tsqd-filters-container")}>
           <div
             class={clsx(
-              styles.filterInput,
+              styles().filterInput,
               "tsqd-query-filter-textfield-container"
             )}
           >
@@ -11206,7 +11386,7 @@ var DevtoolsPanel = (props) => {
           </div>
           <div
             class={clsx(
-              styles.filterSelect,
+              styles().filterSelect,
               "tsqd-query-filter-sort-container"
             )}
           >
@@ -11237,13 +11417,13 @@ var DevtoolsPanel = (props) => {
             </Show>
           </button>
         </div>
-        <div class={clsx(styles.actionsContainer, "tsqd-actions-container")}>
+        <div class={clsx(styles().actionsContainer, "tsqd-actions-container")}>
           <button
             onClick={() => {
               cache().clear();
             }}
             class={clsx(
-              styles.actionsBtn,
+              styles().actionsBtn,
               "tsqd-actions-btn",
               "tsqd-action-clear-cache"
             )}
@@ -11261,7 +11441,8 @@ var DevtoolsPanel = (props) => {
               }
             }}
             class={clsx(
-              styles.actionsBtn,
+              styles().actionsBtn,
+              offline() && styles().actionsBtnOffline,
               "tsqd-actions-btn",
               "tsqd-action-mock-offline-behavior"
             )}
@@ -11272,24 +11453,24 @@ var DevtoolsPanel = (props) => {
           <index$d.Root gutter={4}>
             <index$d.Trigger
               class={clsx(
-                styles.actionsBtn,
+                styles().actionsBtn,
                 "tsqd-actions-btn",
                 "tsqd-action-settings"
               )}
             ><Settings /></index$d.Trigger>
             <index$d.Portal><index$d.Content
-              class={clsx(styles.settingsMenu, "tsqd-settings-menu")}
+              class={clsx(styles().settingsMenu, "tsqd-settings-menu")}
             >
               <div
                 class={clsx(
-                  styles.settingsMenuHeader,
+                  styles().settingsMenuHeader,
                   "tsqd-settings-menu-header"
                 )}
               >Settings</div>
               <index$d.Sub overlap gutter={8} shift={-4}>
                 <index$d.SubTrigger
                   class={clsx(
-                    styles.settingsSubTrigger,
+                    styles().settingsSubTrigger,
                     "tsqd-settings-menu-sub-trigger",
                     "tsqd-settings-menu-sub-trigger-position"
                   )}
@@ -11298,7 +11479,10 @@ var DevtoolsPanel = (props) => {
                   <ChevronDown />
                 </index$d.SubTrigger>
                 <index$d.Portal><index$d.SubContent
-                  class={clsx(styles.settingsMenu, "tsqd-settings-submenu")}
+                  class={clsx(
+                    styles().settingsMenu,
+                    "tsqd-settings-submenu"
+                  )}
                 >
                   <index$d.Item
                     onSelect={() => {
@@ -11306,7 +11490,7 @@ var DevtoolsPanel = (props) => {
                     }}
                     as="button"
                     class={clsx(
-                      styles.settingsSubButton,
+                      styles().settingsSubButton,
                       "tsqd-settings-menu-position-btn",
                       "tsqd-settings-menu-position-btn-top"
                     )}
@@ -11320,7 +11504,7 @@ var DevtoolsPanel = (props) => {
                     }}
                     as="button"
                     class={clsx(
-                      styles.settingsSubButton,
+                      styles().settingsSubButton,
                       "tsqd-settings-menu-position-btn",
                       "tsqd-settings-menu-position-btn-bottom"
                     )}
@@ -11334,7 +11518,7 @@ var DevtoolsPanel = (props) => {
                     }}
                     as="button"
                     class={clsx(
-                      styles.settingsSubButton,
+                      styles().settingsSubButton,
                       "tsqd-settings-menu-position-btn",
                       "tsqd-settings-menu-position-btn-left"
                     )}
@@ -11348,7 +11532,7 @@ var DevtoolsPanel = (props) => {
                     }}
                     as="button"
                     class={clsx(
-                      styles.settingsSubButton,
+                      styles().settingsSubButton,
                       "tsqd-settings-menu-position-btn",
                       "tsqd-settings-menu-position-btn-right"
                     )}
@@ -11358,13 +11542,77 @@ var DevtoolsPanel = (props) => {
                   </index$d.Item>
                 </index$d.SubContent></index$d.Portal>
               </index$d.Sub>
+              <index$d.Sub overlap gutter={8} shift={-4}>
+                <index$d.SubTrigger
+                  class={clsx(
+                    styles().settingsSubTrigger,
+                    "tsqd-settings-menu-sub-trigger",
+                    "tsqd-settings-menu-sub-trigger-position"
+                  )}
+                >
+                  <span>Theme</span>
+                  <ChevronDown />
+                </index$d.SubTrigger>
+                <index$d.Portal><index$d.SubContent
+                  class={clsx(
+                    styles().settingsMenu,
+                    "tsqd-settings-submenu"
+                  )}
+                >
+                  <index$d.Item
+                    onSelect={() => {
+                      props.setLocalStore("theme_preference", "light");
+                    }}
+                    as="button"
+                    class={clsx(
+                      styles().settingsSubButton,
+                      props.localStore.theme_preference === "light" && styles().themeSelectedButton,
+                      "tsqd-settings-menu-position-btn",
+                      "tsqd-settings-menu-position-btn-top"
+                    )}
+                  >
+                    <span>Light</span>
+                    <Sun />
+                  </index$d.Item>
+                  <index$d.Item
+                    onSelect={() => {
+                      props.setLocalStore("theme_preference", "dark");
+                    }}
+                    as="button"
+                    class={clsx(
+                      styles().settingsSubButton,
+                      props.localStore.theme_preference === "dark" && styles().themeSelectedButton,
+                      "tsqd-settings-menu-position-btn",
+                      "tsqd-settings-menu-position-btn-bottom"
+                    )}
+                  >
+                    <span>Dark</span>
+                    <Moon />
+                  </index$d.Item>
+                  <index$d.Item
+                    onSelect={() => {
+                      props.setLocalStore("theme_preference", "system");
+                    }}
+                    as="button"
+                    class={clsx(
+                      styles().settingsSubButton,
+                      props.localStore.theme_preference === "system" && styles().themeSelectedButton,
+                      "tsqd-settings-menu-position-btn",
+                      "tsqd-settings-menu-position-btn-left"
+                    )}
+                  >
+                    <span>System</span>
+                    <Monitor />
+                  </index$d.Item>
+                </index$d.SubContent></index$d.Portal>
+              </index$d.Sub>
             </index$d.Content></index$d.Portal>
           </index$d.Root>
         </div>
       </div>
       <div
         class={clsx(
-          styles.overflowQueryContainer,
+          styles().overflowQueryContainer,
           "tsqd-queries-overflow-container"
         )}
       ><div class="tsqd-queries-container"><Key by={(q) => q.queryHash} each={queries()}>{(query) => <QueryRow query={query()} />}</Key></div></div>
@@ -11373,7 +11621,12 @@ var DevtoolsPanel = (props) => {
   </aside>;
 };
 var QueryRow = (props) => {
-  const styles = getStyles2();
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles2 : lightStyles2;
+  });
+  const { colors, alpha } = tokens;
+  const t2 = (light, dark) => theme() === "dark" ? dark : light;
   const queryState = createSubscribeToQueryCacheBatcher(
     (queryCache) => queryCache().find({
       queryKey: props.query.queryKey
@@ -11401,28 +11654,34 @@ var QueryRow = (props) => {
       isStale: isStale()
     })
   );
+  const getObserverCountColorStyles = () => {
+    if (color() === "gray") {
+      return u`
+        background-color: ${t2(colors[color()][200], colors[color()][700])};
+        color: ${t2(colors[color()][700], colors[color()][300])};
+      `;
+    }
+    return u`
+      background-color: ${t2(
+      colors[color()][200] + alpha[80],
+      colors[color()][900]
+    )};
+      color: ${t2(colors[color()][800], colors[color()][300])};
+    `;
+  };
   return <Show when={queryState()}><button
     onClick={() => setSelectedQueryHash(
       props.query.queryHash === selectedQueryHash() ? null : props.query.queryHash
     )}
     class={clsx(
-      styles.queryRow,
-      selectedQueryHash() === props.query.queryHash && styles.selectedQueryRow,
+      styles().queryRow,
+      selectedQueryHash() === props.query.queryHash && styles().selectedQueryRow,
       "tsqd-query-row"
     )}
     aria-label={`Query key ${props.query.queryHash}`}
   >
     <div
-      class={clsx(
-        color() === "gray" ? u`
-                  background-color: ${tokens.colors[color()][700]};
-                  color: ${tokens.colors[color()][300]};
-                ` : u`
-                  background-color: ${tokens.colors[color()][900]};
-                  color: ${tokens.colors[color()][300]};
-                `,
-        "tsqd-query-observer-count"
-      )}
+      class={clsx(getObserverCountColorStyles(), "tsqd-query-observer-count")}
     >{observers()}</div>
     <code class="tsqd-query-hash">{props.query.queryHash}</code>
     <Show when={isDisabled()}><div class="tsqd-query-disabled-indicator">disabled</div></Show>
@@ -11444,8 +11703,13 @@ var QueryStatusCount = () => {
   const inactive = createSubscribeToQueryCacheBatcher(
     (queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "inactive").length
   );
-  const styles = getStyles2();
-  return <div class={clsx(styles.queryStatusContainer, "tsqd-query-status-container")}>
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles2 : lightStyles2;
+  });
+  return <div
+    class={clsx(styles().queryStatusContainer, "tsqd-query-status-container")}
+  >
     <QueryStatus label="Fresh" color="green" count={fresh()} />
     <QueryStatus label="Fetching" color="blue" count={fetching()} />
     <QueryStatus label="Paused" color="purple" count={paused()} />
@@ -11454,7 +11718,12 @@ var QueryStatusCount = () => {
   </div>;
 };
 var QueryStatus = (props) => {
-  const styles = getStyles2();
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles2 : lightStyles2;
+  });
+  const { colors, alpha } = tokens;
+  const t2 = (light, dark) => theme() === "dark" ? dark : light;
   let tagRef;
   const [mouseOver, setMouseOver] = createSignal(false);
   const [focused, setFocused] = createSignal(false);
@@ -11480,11 +11749,11 @@ var QueryStatus = (props) => {
     disabled={showLabel()}
     ref={tagRef}
     class={clsx(
-      styles.queryStatusTag,
+      styles().queryStatusTag,
       !showLabel() && u`
             cursor: pointer;
             &:hover {
-              background: ${tokens.colors.darkGray[400]}${tokens.alpha[80]};
+              background: ${t2(colors.gray[200], colors.darkGray[400])}${alpha[80]};
             }
           `,
       "tsqd-query-status-tag",
@@ -11497,7 +11766,7 @@ var QueryStatus = (props) => {
     <Show when={!showLabel() && (mouseOver() || focused())}><div
       role="tooltip"
       id="tsqd-status-tooltip"
-      class={clsx(styles.statusTooltip, "tsqd-query-status-tooltip")}
+      class={clsx(styles().statusTooltip, "tsqd-query-status-tooltip")}
     >{props.label}</div></Show>
     <span
       class={clsx(
@@ -11511,24 +11780,33 @@ var QueryStatus = (props) => {
       )}
     />
     <Show when={showLabel()}><span
-      class={clsx(styles.queryStatusTagLabel, "tsqd-query-status-tag-label")}
+      class={clsx(
+        styles().queryStatusTagLabel,
+        "tsqd-query-status-tag-label"
+      )}
     >{props.label}</span></Show>
     <span
       class={clsx(
-        styles.queryStatusCount,
-        props.count > 0 && props.color !== "gray" ? u`
-                background-color: ${tokens.colors[props.color][900]};
-                color: ${tokens.colors[props.color][300]};
-              ` : u`
-                color: ${tokens.colors["gray"][400]};
-              `,
+        styles().queryStatusCount,
+        props.count > 0 && props.color !== "gray" && u`
+              background-color: ${t2(
+          colors[props.color][100],
+          colors[props.color][900]
+        )};
+              color: ${t2(colors[props.color][700], colors[props.color][300])};
+            `,
         "tsqd-query-status-tag-count"
       )}
     >{props.count}</span>
   </button>;
 };
 var QueryDetails = () => {
-  const styles = getStyles2();
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles2 : lightStyles2;
+  });
+  const { colors } = tokens;
+  const t2 = (light, dark) => theme() === "dark" ? dark : light;
   const queryClient = useQueryDevtoolsContext().client;
   const [restoringLoading, setRestoringLoading] = createSignal(false);
   const errorTypes = createMemo(() => {
@@ -11599,26 +11877,34 @@ var QueryDetails = () => {
       setRestoringLoading(false);
     }
   });
-  return <Show when={activeQuery() && activeQueryState()}><div class={clsx(styles.detailsContainer, "tsqd-query-details-container")}>
-    <div class={clsx(styles.detailsHeader, "tsqd-query-details-header")}>Query Details</div>
+  const getQueryStatusColors = () => {
+    if (color() === "gray") {
+      return u`
+        background-color: ${t2(colors[color()][200], colors[color()][700])};
+        color: ${t2(colors[color()][700], colors[color()][300])};
+        border-color: ${t2(colors[color()][400], colors[color()][600])};
+      `;
+    }
+    return u`
+      background-color: ${t2(colors[color()][100], colors[color()][900])};
+      color: ${t2(colors[color()][700], colors[color()][300])};
+      border-color: ${t2(colors[color()][400], colors[color()][600])};
+    `;
+  };
+  return <Show when={activeQuery() && activeQueryState()}><div
+    class={clsx(styles().detailsContainer, "tsqd-query-details-container")}
+  >
+    <div class={clsx(styles().detailsHeader, "tsqd-query-details-header")}>Query Details</div>
     <div
-      class={clsx(styles.detailsBody, "tsqd-query-details-summary-container")}
+      class={clsx(
+        styles().detailsBody,
+        "tsqd-query-details-summary-container"
+      )}
     >
       <div class="tsqd-query-details-summary">
         <pre><code>{displayValue(activeQuery().queryKey, true)}</code></pre>
         <span
-          class={clsx(
-            styles.queryDetailsStatus,
-            color() === "gray" ? u`
-                      background-color: ${tokens.colors[color()][700]};
-                      color: ${tokens.colors[color()][300]};
-                      border-color: ${tokens.colors[color()][600]};
-                    ` : u`
-                      background-color: ${tokens.colors[color()][900]};
-                      color: ${tokens.colors[color()][300]};
-                      border-color: ${tokens.colors[color()][600]};
-                    `
-          )}
+          class={clsx(styles().queryDetailsStatus, getQueryStatusColors())}
         >{statusLabel()}</span>
       </div>
       <div class="tsqd-query-details-observers-count">
@@ -11630,14 +11916,17 @@ var QueryDetails = () => {
         <span>{new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString()}</span>
       </div>
     </div>
-    <div class={clsx(styles.detailsHeader, "tsqd-query-details-header")}>Actions</div>
+    <div class={clsx(styles().detailsHeader, "tsqd-query-details-header")}>Actions</div>
     <div
-      class={clsx(styles.actionsBody, "tsqd-query-details-actions-container")}
+      class={clsx(
+        styles().actionsBody,
+        "tsqd-query-details-actions-container"
+      )}
     >
       <button
         class={clsx(
           u`
-                color: ${tokens.colors.blue[400]};
+                color: ${t2(colors.blue[600], colors.blue[400])};
               `,
           "tsqd-query-details-actions-btn",
           "tsqd-query-details-action-refetch"
@@ -11647,7 +11936,7 @@ var QueryDetails = () => {
       >
         <span
           class={u`
-                background-color: ${tokens.colors.blue[400]};
+                background-color: ${t2(colors.blue[600], colors.blue[400])};
               `}
         />
         {"Refetch"}
@@ -11655,7 +11944,7 @@ var QueryDetails = () => {
       <button
         class={clsx(
           u`
-                color: ${tokens.colors.yellow[400]};
+                color: ${t2(colors.yellow[600], colors.yellow[400])};
               `,
           "tsqd-query-details-actions-btn",
           "tsqd-query-details-action-invalidate"
@@ -11665,7 +11954,7 @@ var QueryDetails = () => {
       >
         <span
           class={u`
-                background-color: ${tokens.colors.yellow[400]};
+                background-color: ${t2(colors.yellow[600], colors.yellow[400])};
               `}
         />
         {"Invalidate"}
@@ -11673,7 +11962,7 @@ var QueryDetails = () => {
       <button
         class={clsx(
           u`
-                color: ${tokens.colors.gray[300]};
+                color: ${t2(colors.gray[600], colors.gray[300])};
               `,
           "tsqd-query-details-actions-btn",
           "tsqd-query-details-action-reset"
@@ -11683,7 +11972,7 @@ var QueryDetails = () => {
       >
         <span
           class={u`
-                background-color: ${tokens.colors.gray[400]};
+                background-color: ${t2(colors.gray[600], colors.gray[400])};
               `}
         />
         {"Reset"}
@@ -11691,7 +11980,7 @@ var QueryDetails = () => {
       <button
         class={clsx(
           u`
-                color: ${tokens.colors.pink[400]};
+                color: ${t2(colors.pink[500], colors.pink[400])};
               `,
           "tsqd-query-details-actions-btn",
           "tsqd-query-details-action-remove"
@@ -11704,7 +11993,7 @@ var QueryDetails = () => {
       >
         <span
           class={u`
-                background-color: ${tokens.colors.pink[400]};
+                background-color: ${t2(colors.pink[500], colors.pink[400])};
               `}
         />
         {"Remove"}
@@ -11712,7 +12001,7 @@ var QueryDetails = () => {
       <button
         class={clsx(
           u`
-                color: ${tokens.colors.cyan[400]};
+                color: ${t2(colors.cyan[500], colors.cyan[400])};
               `,
           "tsqd-query-details-actions-btn",
           "tsqd-query-details-action-loading"
@@ -11749,7 +12038,7 @@ var QueryDetails = () => {
       >
         <span
           class={u`
-                background-color: ${tokens.colors.cyan[400]};
+                background-color: ${t2(colors.cyan[500], colors.cyan[400])};
               `}
         />
         {queryStatus() === "pending" ? "Restore" : "Trigger"}
@@ -11758,7 +12047,7 @@ var QueryDetails = () => {
       <Show when={errorTypes().length === 0 || queryStatus() === "error"}><button
         class={clsx(
           u`
-                  color: ${tokens.colors.red[400]};
+                  color: ${t2(colors.red[500], colors.red[400])};
                 `,
           "tsqd-query-details-actions-btn",
           "tsqd-query-details-action-error"
@@ -11774,7 +12063,7 @@ var QueryDetails = () => {
       >
         <span
           class={u`
-                  background-color: ${tokens.colors.red[400]};
+                  background-color: ${t2(colors.red[500], colors.red[400])};
                 `}
         />
         {queryStatus() === "error" ? "Restore" : "Trigger"}
@@ -11784,7 +12073,7 @@ var QueryDetails = () => {
         when={!(errorTypes().length === 0 || queryStatus() === "error")}
       ><div
         class={clsx(
-          styles.actionsSelect,
+          styles().actionsSelect,
           "tsqd-query-details-actions-btn",
           "tsqd-query-details-action-error-multiple"
         )}
@@ -11799,7 +12088,7 @@ var QueryDetails = () => {
           disabled={queryStatus() === "pending"}
           onChange={(e2) => {
             const errorType = errorTypes().find(
-              (t2) => t2.name === e2.currentTarget.value
+              (et) => et.name === e2.currentTarget.value
             );
             triggerError(errorType);
           }}
@@ -11810,7 +12099,7 @@ var QueryDetails = () => {
         <ChevronDown />
       </div></Show>
     </div>
-    <div class={clsx(styles.detailsHeader, "tsqd-query-details-header")}>Data Explorer</div>
+    <div class={clsx(styles().detailsHeader, "tsqd-query-details-header")}>Data Explorer</div>
     <div
       style={{
         padding: "0.5rem"
@@ -11823,7 +12112,7 @@ var QueryDetails = () => {
       editable={true}
       activeQuery={activeQuery()}
     /></div>
-    <div class={clsx(styles.detailsHeader, "tsqd-query-details-header")}>Query Explorer</div>
+    <div class={clsx(styles().detailsHeader, "tsqd-query-details-header")}>Query Explorer</div>
     <div
       style={{
         padding: "0.5rem"
@@ -11873,8 +12162,9 @@ var createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true) => {
   });
   return value;
 };
-var getStyles2 = () => {
+var stylesFactory2 = (theme) => {
   const { colors, font, size: size2, alpha, shadow, border } = tokens;
+  const t2 = (light, dark) => theme === "light" ? light : dark;
   return {
     devtoolsBtn: u`
       z-index: 100000;
@@ -11936,8 +12226,6 @@ var getStyles2 = () => {
       display: flex;
       gap: ${tokens.size[0.5]};
       & * {
-        font-family: 'Inter', sans-serif;
-        color: ${colors.gray[300]};
         box-sizing: border-box;
         text-transform: none;
       }
@@ -11964,7 +12252,7 @@ var getStyles2 = () => {
       left: 0;
       max-height: 90%;
       min-height: 3.5rem;
-      border-bottom: ${colors.darkGray[300]} 1px solid;
+      border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
     `,
     "panel-position-bottom": u`
       bottom: 0;
@@ -11972,20 +12260,20 @@ var getStyles2 = () => {
       left: 0;
       max-height: 90%;
       min-height: 3.5rem;
-      border-top: ${colors.darkGray[300]} 1px solid;
+      border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
     `,
     "panel-position-right": u`
       bottom: 0;
       right: 0;
       top: 0;
-      border-left: ${colors.darkGray[300]} 1px solid;
+      border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
       max-width: 90%;
     `,
     "panel-position-left": u`
       bottom: 0;
       left: 0;
       top: 0;
-      border-right: ${colors.darkGray[300]} 1px solid;
+      border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
       max-width: 90%;
     `,
     closeBtn: u`
@@ -11996,13 +12284,15 @@ var getStyles2 = () => {
       align-items: center;
       justify-content: center;
       outline: none;
+      background-color: ${t2(colors.gray[50], colors.darkGray[700])};
       &:hover {
-        background-color: ${colors.darkGray[500]};
+        background-color: ${t2(colors.gray[200], colors.darkGray[500])};
       }
       &:focus-visible {
         outline: 2px solid ${colors.blue[600]};
       }
       & svg {
+        color: ${t2(colors.gray[600], colors.gray[400])};
         width: ${size2[2]};
         height: ${size2[2]};
       }
@@ -12011,11 +12301,10 @@ var getStyles2 = () => {
       bottom: 0;
       right: ${size2[2]};
       transform: translate(0, 100%);
-      background-color: ${colors.darkGray[700]};
-      border-right: ${colors.darkGray[300]} 1px solid;
-      border-left: ${colors.darkGray[300]} 1px solid;
+      border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
+      border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
       border-top: none;
-      border-bottom: ${colors.darkGray[300]} 1px solid;
+      border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
       border-radius: 0px 0px ${border.radius.sm} ${border.radius.sm};
       padding: ${size2[0.5]} ${size2[1.5]} ${size2[1]} ${size2[1.5]};
 
@@ -12036,10 +12325,9 @@ var getStyles2 = () => {
       top: 0;
       right: ${size2[2]};
       transform: translate(0, -100%);
-      background-color: ${colors.darkGray[700]};
-      border-right: ${colors.darkGray[300]} 1px solid;
-      border-left: ${colors.darkGray[300]} 1px solid;
-      border-top: ${colors.darkGray[300]} 1px solid;
+      border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
+      border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
+      border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
       border-bottom: none;
       border-radius: ${border.radius.sm} ${border.radius.sm} 0px 0px;
       padding: ${size2[1]} ${size2[1.5]} ${size2[0.5]} ${size2[1.5]};
@@ -12057,11 +12345,10 @@ var getStyles2 = () => {
       bottom: ${size2[2]};
       left: 0;
       transform: translate(-100%, 0);
-      background-color: ${colors.darkGray[700]};
       border-right: none;
-      border-left: ${colors.darkGray[300]} 1px solid;
-      border-top: ${colors.darkGray[300]} 1px solid;
-      border-bottom: ${colors.darkGray[300]} 1px solid;
+      border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
+      border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
+      border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
       border-radius: ${border.radius.sm} 0px 0px ${border.radius.sm};
       padding: ${size2[1.5]} ${size2[0.5]} ${size2[1.5]} ${size2[1]};
 
@@ -12081,11 +12368,10 @@ var getStyles2 = () => {
       bottom: ${size2[2]};
       right: 0;
       transform: translate(100%, 0);
-      background-color: ${colors.darkGray[700]};
       border-left: none;
-      border-right: ${colors.darkGray[300]} 1px solid;
-      border-top: ${colors.darkGray[300]} 1px solid;
-      border-bottom: ${colors.darkGray[300]} 1px solid;
+      border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
+      border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
+      border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
       border-radius: 0px ${border.radius.sm} ${border.radius.sm} 0px;
       padding: ${size2[1.5]} ${size2[1]} ${size2[1.5]} ${size2[0.5]};
 
@@ -12103,15 +12389,18 @@ var getStyles2 = () => {
     `,
     queriesContainer: u`
       flex: 1 1 700px;
-      background-color: ${colors.darkGray[700]};
+      background-color: ${t2(colors.gray[50], colors.darkGray[700])};
       display: flex;
       flex-direction: column;
+      & * {
+        font-family: 'Inter', sans-serif;
+      }
     `,
     dragHandle: u`
       position: absolute;
       transition: background-color 0.125s ease;
       &:hover {
-        background-color: ${colors.purple[400]}${alpha[90]};
+        background-color: ${colors.purple[400]}${t2("", alpha[90])};
       }
       z-index: 4;
     `,
@@ -12145,7 +12434,7 @@ var getStyles2 = () => {
       align-items: center;
       padding: ${tokens.size[2]} ${tokens.size[2.5]};
       gap: ${tokens.size[3]};
-      border-bottom: ${colors.darkGray[500]} 1px solid;
+      border-bottom: ${t2(colors.gray[300], colors.darkGray[500])} 1px solid;
       align-items: center;
       & > button {
         padding: 0;
@@ -12172,11 +12461,15 @@ var getStyles2 = () => {
       font-weight: ${font.weight.bold};
       line-height: ${font.lineHeight.xs};
       white-space: nowrap;
+      color: ${t2(colors.gray[600], colors.gray[300])};
     `,
     queryFlavorLogo: u`
       font-weight: ${font.weight.semibold};
       font-size: ${font.size.xs};
-      background: linear-gradient(to right, #dd524b, #e9a03b);
+      background: linear-gradient(
+        to right,
+        ${t2("#ea4037, #ff9b11", "#dd524b, #e9a03b")}
+      );
       background-clip: text;
       -webkit-background-clip: text;
       line-height: 1;
@@ -12191,14 +12484,17 @@ var getStyles2 = () => {
     queryStatusTag: u`
       display: flex;
       gap: ${tokens.size[1.5]};
-      background: ${colors.darkGray[500]};
+      box-sizing: border-box;
+      height: ${tokens.size[6.5]};
+      background: ${t2(colors.gray[50], colors.darkGray[500])};
+      color: ${t2(colors.gray[700], colors.gray[300])};
       border-radius: ${tokens.border.radius.sm};
       font-size: ${font.size.sm};
       padding: ${tokens.size[1]};
-      padding-left: ${tokens.size[2]};
+      padding-left: ${tokens.size[1.5]};
       align-items: center;
       font-weight: ${font.weight.medium};
-      border: none;
+      border: ${t2("1px solid " + colors.gray[300], "1px solid transparent")};
       user-select: none;
       position: relative;
       &:focus-visible {
@@ -12215,8 +12511,8 @@ var getStyles2 = () => {
       display: flex;
       align-items: center;
       justify-content: center;
-      color: ${colors.gray[400]};
-      background-color: ${colors.darkGray[300]};
+      color: ${t2(colors.gray[500], colors.gray[400])};
+      background-color: ${t2(colors.gray[200], colors.darkGray[300])};
       border-radius: 2px;
       font-variant-numeric: tabular-nums;
       height: ${tokens.size[4.5]};
@@ -12224,15 +12520,15 @@ var getStyles2 = () => {
     statusTooltip: u`
       position: absolute;
       z-index: 1;
-      background-color: ${colors.darkGray[500]};
+      background-color: ${t2(colors.gray[50], colors.darkGray[500])};
       top: 100%;
       left: 50%;
       transform: translate(-50%, calc(${tokens.size[2]}));
       padding: ${tokens.size[0.5]} ${tokens.size[2]};
-      border-radius: ${tokens.border.radius.md};
+      border-radius: ${tokens.border.radius.sm};
       font-size: ${font.size.xs};
-      border: 1px solid ${colors.gray[600]};
-      color: ${tokens.colors["gray"][300]};
+      border: 1px solid ${t2(colors.gray[400], colors.gray[600])};
+      color: ${t2(colors["gray"][600], colors["gray"][300])};
 
       &::before {
         top: 0px;
@@ -12241,7 +12537,8 @@ var getStyles2 = () => {
         left: 50%;
         transform: translate(-50%, -100%);
         position: absolute;
-        border-color: transparent transparent ${colors.gray[600]} transparent;
+        border-color: transparent transparent
+          ${t2(colors.gray[400], colors.gray[600])} transparent;
         border-style: solid;
         border-width: 7px;
         /* transform: rotate(180deg); */
@@ -12252,17 +12549,14 @@ var getStyles2 = () => {
         content: ' ';
         display: block;
         left: 50%;
-        transform: translate(-50%, calc(-100% + 2.5px));
+        transform: translate(-50%, calc(-100% + 2px));
         position: absolute;
-        border-color: transparent transparent ${colors.darkGray[500]}
-          transparent;
+        border-color: transparent transparent
+          ${t2(colors.gray[100], colors.darkGray[500])} transparent;
         border-style: solid;
         border-width: 7px;
       }
     `,
-    selectedQueryRow: u`
-      background-color: ${colors.darkGray[500]};
-    `,
     filtersContainer: u`
       display: flex;
       gap: ${tokens.size[2]};
@@ -12271,47 +12565,52 @@ var getStyles2 = () => {
         padding: ${tokens.size[0.5]} ${tokens.size[2]};
         padding-right: ${tokens.size[1.5]};
         border-radius: ${tokens.border.radius.sm};
-        background-color: ${colors.darkGray[400]};
+        background-color: ${t2(colors.gray[100], colors.darkGray[400])};
+        border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
+        color: ${t2(colors.gray[700], colors.gray[300])};
         font-size: ${font.size.xs};
         display: flex;
         align-items: center;
         line-height: ${font.lineHeight.sm};
         gap: ${tokens.size[1.5]};
         max-width: 160px;
-        border: 1px solid ${colors.darkGray[200]};
         &:focus-visible {
           outline-offset: 2px;
           border-radius: ${border.radius.xs};
           outline: 2px solid ${colors.blue[800]};
         }
+        & svg {
+          color: ${t2(colors.gray[500], colors.gray[400])};
+        }
       }
     `,
     filterInput: u`
-      padding: ${tokens.size[0.5]} ${tokens.size[2]};
+      padding: ${size2[0.5]} ${size2[2]};
       border-radius: ${tokens.border.radius.sm};
-      background-color: ${colors.darkGray[400]};
+      background-color: ${t2(colors.gray[100], colors.darkGray[400])};
       display: flex;
       box-sizing: content-box;
       align-items: center;
       gap: ${tokens.size[1.5]};
       max-width: 160px;
       min-width: 100px;
-      border: 1px solid ${colors.darkGray[200]};
+      border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
       height: min-content;
+      color: ${t2(colors.gray[600], colors.gray[400])};
       & > svg {
-        width: ${tokens.size[3]};
-        height: ${tokens.size[3]};
+        width: ${size2[3]};
+        height: ${size2[3]};
       }
       & input {
         font-size: ${font.size.xs};
         width: 100%;
-        background-color: ${colors.darkGray[400]};
+        background-color: ${t2(colors.gray[100], colors.darkGray[400])};
         border: none;
         padding: 0;
         line-height: ${font.lineHeight.sm};
-        color: ${colors.gray[300]};
+        color: ${t2(colors.gray[700], colors.gray[300])};
         &::placeholder {
-          color: ${colors.gray[300]};
+          color: ${t2(colors.gray[700], colors.gray[300])};
         }
         &:focus {
           outline: none;
@@ -12327,24 +12626,26 @@ var getStyles2 = () => {
     filterSelect: u`
       padding: ${tokens.size[0.5]} ${tokens.size[2]};
       border-radius: ${tokens.border.radius.sm};
-      background-color: ${colors.darkGray[400]};
+      background-color: ${t2(colors.gray[100], colors.darkGray[400])};
       display: flex;
       align-items: center;
       gap: ${tokens.size[1.5]};
       box-sizing: content-box;
       max-width: 160px;
-      border: 1px solid ${colors.darkGray[200]};
+      border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
       height: min-content;
       & > svg {
+        color: ${t2(colors.gray[600], colors.gray[400])};
         width: ${tokens.size[2]};
         height: ${tokens.size[2]};
       }
       & > select {
         appearance: none;
+        color: ${t2(colors.gray[700], colors.gray[300])};
         min-width: 100px;
         line-height: ${font.lineHeight.sm};
         font-size: ${font.size.xs};
-        background-color: ${colors.darkGray[400]};
+        background-color: ${t2(colors.gray[100], colors.darkGray[400])};
         border: none;
         &:focus {
           outline: none;
@@ -12362,7 +12663,8 @@ var getStyles2 = () => {
     `,
     actionsBtn: u`
       border-radius: ${tokens.border.radius.sm};
-      background-color: ${colors.darkGray[400]};
+      background-color: ${t2(colors.gray[100], colors.darkGray[400])};
+      border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
       width: 1.625rem;
       height: 1.625rem;
       justify-content: center;
@@ -12370,13 +12672,13 @@ var getStyles2 = () => {
       align-items: center;
       gap: ${tokens.size[1.5]};
       max-width: 160px;
-      border: 1px solid ${colors.darkGray[200]};
       cursor: pointer;
       padding: 0;
       &:hover {
-        background-color: ${colors.darkGray[500]};
+        background-color: ${t2(colors.gray[200], colors.darkGray[500])};
       }
       & svg {
+        color: ${t2(colors.gray[700], colors.gray[300])};
         width: ${tokens.size[3]};
         height: ${tokens.size[3]};
       }
@@ -12386,6 +12688,12 @@ var getStyles2 = () => {
         outline: 2px solid ${colors.blue[800]};
       }
     `,
+    actionsBtnOffline: u`
+      & svg {
+        stroke: ${t2(colors.yellow[700], colors.yellow[500])};
+        fill: ${t2(colors.yellow[700], colors.yellow[500])};
+      }
+    `,
     overflowQueryContainer: u`
       flex: 1;
       overflow-y: auto;
@@ -12398,9 +12706,11 @@ var getStyles2 = () => {
       display: flex;
       align-items: center;
       padding: 0;
-      background-color: inherit;
       border: none;
       cursor: pointer;
+      color: ${t2(colors.gray[700], colors.gray[300])};
+      background-color: ${t2(colors.gray[50], colors.darkGray[700])};
+      line-height: 1;
       &:focus {
         outline: none;
       }
@@ -12410,7 +12720,7 @@ var getStyles2 = () => {
         outline: 2px solid ${colors.blue[800]};
       }
       &:hover .tsqd-query-hash {
-        background-color: ${colors.darkGray[600]};
+        background-color: ${t2(colors.gray[200], colors.darkGray[600])};
       }
 
       & .tsqd-query-observer-count {
@@ -12425,7 +12735,7 @@ var getStyles2 = () => {
         font-weight: ${font.weight.medium};
         border-bottom-width: 1px;
         border-bottom-style: solid;
-        border-bottom: 1px solid ${colors.darkGray[700]};
+        border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[700])};
       }
       & .tsqd-query-hash {
         user-select: text;
@@ -12436,7 +12746,7 @@ var getStyles2 = () => {
         flex: 1;
         padding: ${tokens.size[1]} ${tokens.size[2]};
         font-family: 'Menlo', 'Fira Code', monospace;
-        border-bottom: 1px solid ${colors.darkGray[400]};
+        border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
         text-align: left;
         text-overflow: clip;
         word-break: break-word;
@@ -12447,15 +12757,20 @@ var getStyles2 = () => {
         display: flex;
         align-items: center;
         padding: 0 ${tokens.size[2]};
-        color: ${colors.gray[300]};
-        background-color: ${colors.darkGray[600]};
-        border-bottom: 1px solid ${colors.darkGray[400]};
+        color: ${t2(colors.gray[800], colors.gray[300])};
+        background-color: ${t2(colors.gray[300], colors.darkGray[600])};
+        border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
         font-size: ${font.size.xs};
       }
     `,
+    selectedQueryRow: u`
+      background-color: ${t2(colors.gray[200], colors.darkGray[500])};
+    `,
     detailsContainer: u`
       flex: 1 1 700px;
-      background-color: ${colors.darkGray[700]};
+      background-color: ${t2(colors.gray[50], colors.darkGray[700])};
+      color: ${t2(colors.gray[700], colors.gray[300])};
+      font-family: 'Inter', sans-serif;
       display: flex;
       flex-direction: column;
       overflow-y: auto;
@@ -12463,10 +12778,11 @@ var getStyles2 = () => {
       text-align: left;
     `,
     detailsHeader: u`
+      font-family: 'Inter', sans-serif;
       position: sticky;
       top: 0;
       z-index: 2;
-      background-color: ${colors.darkGray[600]};
+      background-color: ${t2(colors.gray[200], colors.darkGray[600])};
       padding: ${tokens.size[1.5]} ${tokens.size[2]};
       font-weight: ${font.weight.medium};
       font-size: ${font.size.xs};
@@ -12499,6 +12815,10 @@ var getStyles2 = () => {
         font-size: ${font.size.xs};
         line-height: ${font.lineHeight.xs};
       }
+
+      & pre {
+        margin: 0;
+      }
     `,
     queryDetailsStatus: u`
       border: 1px solid ${colors.darkGray[200]};
@@ -12513,12 +12833,13 @@ var getStyles2 = () => {
       gap: ${tokens.size[2]};
       padding: 0px ${tokens.size[2]};
       & > button {
+        font-family: 'Inter', sans-serif;
         font-size: ${font.size.xs};
         padding: ${tokens.size[1]} ${tokens.size[2]};
         display: flex;
         border-radius: ${tokens.border.radius.sm};
-        border: 1px solid ${colors.darkGray[400]};
-        background-color: ${colors.darkGray[600]};
+        background-color: ${t2(colors.gray[100], colors.darkGray[600])};
+        border: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
         align-items: center;
         gap: ${tokens.size[2]};
         font-weight: ${font.weight.medium};
@@ -12530,7 +12851,7 @@ var getStyles2 = () => {
           outline: 2px solid ${colors.blue[800]};
         }
         &:hover {
-          background-color: ${colors.darkGray[500]};
+          background-color: ${t2(colors.gray[200], colors.darkGray[500])};
         }
 
         &:disabled {
@@ -12551,17 +12872,17 @@ var getStyles2 = () => {
       display: flex;
       border-radius: ${tokens.border.radius.sm};
       overflow: hidden;
-      border: 1px solid ${colors.darkGray[400]};
-      background-color: ${colors.darkGray[600]};
+      background-color: ${t2(colors.gray[100], colors.darkGray[600])};
+      border: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
       align-items: center;
       gap: ${tokens.size[2]};
       font-weight: ${font.weight.medium};
       line-height: ${font.lineHeight.sm};
-      color: ${tokens.colors.red[400]};
+      color: ${t2(colors.red[500], colors.red[400])};
       cursor: pointer;
       position: relative;
       &:hover {
-        background-color: ${colors.darkGray[500]};
+        background-color: ${t2(colors.gray[200], colors.darkGray[500])};
       }
       & > span {
         width: ${size2[1.5]};
@@ -12602,10 +12923,10 @@ var getStyles2 = () => {
       flex-direction: column;
       gap: ${size2[0.5]};
       border-radius: ${tokens.border.radius.sm};
-      border: 1px solid ${colors.gray[700]};
-      background-color: ${colors.darkGray[600]};
+      border: 1px solid ${t2(colors.gray[300], colors.gray[700])};
+      background-color: ${t2(colors.gray[50], colors.darkGray[600])};
       font-size: ${font.size.xs};
-      color: ${colors.gray[300]};
+      color: ${t2(colors.gray[700], colors.gray[300])};
       z-index: 99999;
       min-width: 120px;
       padding: ${size2[0.5]};
@@ -12615,17 +12936,19 @@ var getStyles2 = () => {
       align-items: center;
       justify-content: space-between;
       border-radius: ${tokens.border.radius.xs};
-      padding: ${tokens.size[0.5]} ${tokens.size[1]};
+      padding: ${tokens.size[1]} ${tokens.size[1]};
       cursor: pointer;
       background-color: transparent;
       border: none;
+      color: ${t2(colors.gray[700], colors.gray[300])};
       & svg {
+        color: ${t2(colors.gray[600], colors.gray[400])};
         transform: rotate(-90deg);
         width: ${tokens.size[2]};
         height: ${tokens.size[2]};
       }
       &:hover {
-        background-color: ${colors.darkGray[500]};
+        background-color: ${t2(colors.gray[200], colors.darkGray[500])};
       }
       &:focus-visible {
         outline-offset: 2px;
@@ -12637,33 +12960,48 @@ var getStyles2 = () => {
       }
     `,
     settingsMenuHeader: u`
-      padding: ${tokens.size[0.5]} ${tokens.size[1]};
+      padding: ${tokens.size[1]} ${tokens.size[1]};
       font-weight: ${font.weight.medium};
-      border-bottom: 1px solid ${colors.darkGray[400]};
-      color: ${colors.gray[400]};
+      border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
+      color: ${t2(colors.gray[500], colors.gray[400])};
       font-size: ${font.size["xs"]};
     `,
     settingsSubButton: u`
       display: flex;
       align-items: center;
       justify-content: space-between;
-      color: ${colors.gray[300]};
+      color: ${t2(colors.gray[700], colors.gray[300])};
       font-size: ${font.size["xs"]};
       border-radius: ${tokens.border.radius.xs};
-      padding: ${tokens.size[0.5]} ${tokens.size[1]};
+      padding: ${tokens.size[1]} ${tokens.size[1]};
       cursor: pointer;
       background-color: transparent;
       border: none;
+      & svg {
+        color: ${t2(colors.gray[600], colors.gray[400])};
+      }
       &:hover {
-        background-color: ${colors.darkGray[500]};
+        background-color: ${t2(colors.gray[200], colors.darkGray[500])};
       }
       &:focus-visible {
         outline-offset: 2px;
         outline: 2px solid ${colors.blue[800]};
       }
+    `,
+    themeSelectedButton: u`
+      background-color: ${t2(colors.purple[100], colors.purple[900])};
+      color: ${t2(colors.purple[700], colors.purple[300])};
+      & svg {
+        color: ${t2(colors.purple[700], colors.purple[300])};
+      }
+      &:hover {
+        background-color: ${t2(colors.purple[100], colors.purple[900])};
+      }
     `
   };
 };
+var lightStyles2 = stylesFactory2("light");
+var darkStyles2 = stylesFactory2("dark");
 export {
   Devtools,
   DevtoolsComponent,