diff --git a/src/css/tailwind.css b/src/css/tailwind.css
index d4e85696..89bf714f 100644
--- a/src/css/tailwind.css
+++ b/src/css/tailwind.css
@@ -8,6 +8,11 @@
     @apply fill-zinc-800;
     font-family: var(--font-fans);
   }
+
+  input,
+  textarea {
+    @apply bg-white;
+  }
 }
 
 *,
diff --git a/src/css/variables.css b/src/css/variables.css
index 1b0a05b3..fe9e1f95 100644
--- a/src/css/variables.css
+++ b/src/css/variables.css
@@ -1,4 +1,4 @@
-:root {
+html {
   --border-color: #eee;
   --font-fans: theme("fontFamily.sans");
   --theme-color: var(--auto-theme-color, theme("colors.orange.500"));
@@ -7,3 +7,19 @@
   /* Accent color for form controls */
   accent-color: var(--theme-color);
 }
+
+html.dark {
+  --border-color: #333;
+}
+
+@media (prefers-color-scheme: dark) {
+  html.not(.light) {
+    --border-color: #333;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  html.not(.dark) {
+    --border-color: #eee;
+  }
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 5f685c2b..2b369878 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -39,6 +39,7 @@ const persister = createIDBPersister()
 function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   const getLayout = Component.getLayout ?? ((page) => page)
 
+  useMediaToggle()
   return (
     <WagmiConfig client={wagmiClient}>
       <PersistQueryClientProvider