A few fixes

src-web/components/GraphQLEditor.tsx

@@ -71,7 +71,7 @@ export function GraphQLEditor({ defaultValue, onChange, baseRequest, ...extraEdi
   const dialog = useDialog();
 
   return (
-    <div className="pb-2 h-full grid grid-rows-[minmax(0,100%)_auto_auto_minmax(0,auto)]">
+    <div className="pb-2 h-full w-full grid grid-cols-1 grid-rows-[minmax(0,100%)_auto_auto_minmax(0,auto)]">
       <Editor
         contentType="application/graphql"
         defaultValue={query ?? ''}

src-web/components/ResponsePane.tsx

@@ -84,6 +84,9 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
     [activeResponse?.headers, toggleViewMode, viewMode],
   );
 
+  // Don't render until we know the view mode
+  if (viewMode === undefined) return null;
+
   return (
     <div
       style={style}

src-web/components/core/StatusTag.tsx

@@ -15,7 +15,7 @@ export function StatusTag({ asBackground, response, className }: Props) {
       <span
         className={classnames(
           className,
-          'text-white bg-opacity-90',
+          'text-white bg-opacity-90 dark:bg-opacity-50',
           status >= 0 && status < 100 && 'bg-red-600',
           status >= 100 && status < 200 && 'bg-yellow-600',
           status >= 200 && status < 300 && 'bg-green-600',

src-web/hooks/useTheme.ts

@@ -1,7 +1,9 @@
 import { useEffect } from 'react';
+import { getKeyValue } from '../lib/keyValueStore';
 import type { Appearance } from '../lib/theme/window';
 import {
   getAppearance,
+  getPreferredAppearance,
   setAppearance,
   subscribeToPreferredAppearanceChange,
 } from '../lib/theme/window';
@@ -24,7 +26,14 @@ export function useTheme() {
   useEffect(() => setAppearance(appearanceKv.value), [appearanceKv.value]);
 
   return {
-    appearance: appearanceKv.value,
+    appearance: appearanceKv.value ?? getAppearance(),
     toggleAppearance: handleToggleAppearance,
   };
 }
+
+export async function getAppearanceKv() {
+  return getKeyValue<Appearance>({
+    key: 'appearance',
+    fallback: getPreferredAppearance(),
+  });
+}

src-web/lib/theme/window.ts

@@ -12,7 +12,7 @@ const darkTheme: AppTheme = {
       colors: {
         gray: '#6b5b98',
         red: '#ff417b',
-        orange: '#ff9411',
+        orange: '#ff9011',
         yellow: '#e8d13f',
         green: '#43e76f',
         blue: '#219dff',
@@ -31,11 +31,11 @@ const lightTheme: AppTheme = {
       colors: {
         gray: '#7f8fb0',
         red: '#ec3f87',
-        orange: '#ff8b00',
+        orange: '#ff8000',
         yellow: '#e7cf24',
         green: '#00d365',
         blue: '#0090ff',
-        pink: '#f670f6',
+        pink: '#ea6cea',
         violet: '#ac6cff',
       },
     },
@@ -50,14 +50,6 @@ export function getAppearance(): Appearance {
   return getPreferredAppearance();
 }
 
-export function toggleAppearance(): Appearance {
-  const currentTheme =
-    document.documentElement.getAttribute('data-appearance') ?? getPreferredAppearance();
-  const newAppearance = currentTheme === 'dark' ? 'light' : 'dark';
-  setAppearance(newAppearance);
-  return newAppearance;
-}
-
 export function setAppearance(a?: Appearance) {
   const appearance = a ?? getPreferredAppearance();
   const theme = appearance === 'dark' ? darkTheme : lightTheme;