feat: more styling

Author: jaybuidl

docs/kleros-logo-fullwhite.png

@@ -6,6 +6,7 @@ import { configureChains, createConfig, WagmiConfig } from "wagmi";
 import { arbitrumGoerli, gnosisChiado } from "wagmi/chains";
 import { publicProvider } from "wagmi/providers/public";
 import { useToggleTheme } from "hooks/useToggleThemeContext";
+import { useTheme } from "styled-components";
 
 const chains = [arbitrumGoerli, gnosisChiado];
 const projectId = process.env.WALLETCONNECT_PROJECT_ID ?? "6efaa26765fa742153baf9281e218217";
@@ -24,11 +25,23 @@ const wagmiConfig = createConfig({
 const ethereumClient = new EthereumClient(wagmiConfig, chains);
 
 const Web3Provider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [theme] = useToggleTheme();
+  const [themeToggle] = useToggleTheme();
+  const theme = useTheme();
   return (
     <>
       <WagmiConfig config={wagmiConfig}> {children} </WagmiConfig>
-      <Web3Modal themeMode={theme as "light" | "dark"} {...{ projectId, ethereumClient }} />
+      <Web3Modal
+        themeMode={themeToggle as "light" | "dark"}
+        themeVariables={{
+          "--w3m-accent-color": theme.primaryPurple,
+          "--w3m-background-color": theme.primaryPurple,
+          "--w3m-overlay-background-color": "rgba(0, 0, 0, 0.6)",
+          "--w3m-overlay-backdrop-filter": "blur(3px)",
+          "--w3m-logo-image-url": "https://github.com/kleros/kleros-v2/blob/feat(web)/wallet-connect-themes/docs/kleros-logo-white.png?raw=true",
+          "--w3m-color-bg-1": theme.lightBackground,
+        }}
+        {...{ projectId, ethereumClient }}
+      />
     </>
   );
 };