2

I am a newbie to React/Typescript and I am trying to build a DeFi project using the Solana Wallet adapter. From what I can see the wallet adapter comes with a React UI look and feel based on the Solana colour scheme.

I want to use a different colour scheme for my project. Is there a way to override the default colour scheme in the wallet adapter code? At present, I removed the UI imports i.e.

import {
    WalletModalProvider,
    WalletDisconnectButton,
    WalletMultiButton
} from '@solana/wallet-adapter-react-ui';

and the wallet button looks like this:

wallet button without wallet-adapter-react-ui

It doesn't look particularly good or professional. I am trying to do a POC for a presentation. I feel like I would need to invest a lot of time to customise it manually. I don't have that time, plus I could do all that work and then find out there was an easier approach.

Any help/advice would be appreciated.

Improve this question

1 Answer 1

Reset to default
3

The wallet adapter styles can be added like so

require("@solana/wallet-adapter-react-ui/styles.css");

You can also find the class naming convention and override the css.

Improve this answer
1
  • Thank so much. I copied over the CSS file into my project and changed the colours there and it worked perfectly. Thanks again.
    – PutCallTheta
    Aug 18, 2022 at 19:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.