fix: built color

Signed-off-by: Innei <tukon479@gmail.com>

src/css/tailwind.css

@@ -8,6 +8,11 @@
     @apply fill-zinc-800;
     font-family: var(--font-fans);
   }
+
+  input,
+  textarea {
+    @apply bg-white;
+  }
 }
 
 *,

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;
+  }
+}

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