How to change the "Connect Wallet" text color?

[cvpfus]

I can change the button color by adding --w3m-accent like this

themeVariables: {
    '--w3m-accent': '#00BB7F',
  }

But how to change the text color?

[rtomas]

why don't you create a custom button and open the modal with our hooks ?
https://docs.reown.com/appkit/react/core/hooks#useappkit

[cvpfus]

I faced another issue. I got this error:
Error: Please call "createAppKit" before using "useAppKit" hook

Here's the code:

"use client";

import { Button } from "@/components/ui/button";
import { useAppKit } from "@reown/appkit/react";

export default function ConnectButton() {
  const { open } = useAppKit();

  const handleConnect = () => {
    open();
  };

  return <Button onClick={handleConnect}>Connect</Button>;
}

[dellwatson]

because not everyone use react, and i use vanilla js for some reason with astro.js
and it's a pain customizing this button

[rtomas]

please check our vanilla Js example on how to call the fn open .. instead of using a hook

https://github.com/reown-com/appkit-web-examples/blob/main/javascript/javascript-wagmi/src/main.js

[dellwatson]

https://github.com/reown-com/appkit-web-examples/blob/main/javascript/javascript-wagmi/src/main.js

What you're showing is how to implement, not how to style it with vanilla. But I already found out how to style it by tweaking the root of --w3m. The styling is using the previous naming before becoming Reown, although I still don't know fully the modal styling.

There's zero in the docs and zero in the examples on explaining the styling modification that I need to inspect it one by one.