cosmology-tech / cosmos-kit

Universal wallet connector for the Cosmos ⚛️
https://cosmology.zone/products/cosmos-kit
BSD 3-Clause Clear License
183 stars 128 forks source link

Unable to change colors or customize internal modal them #381

Closed CalicoNino closed 7 months ago

CalicoNino commented 9 months ago

Hi,

I am trying to customize the modal with a color palette, but it doesn't seem that I am able to change the inner container background color, the current default in dark theme is dark grey. Anything I'm missing?

Currently, I am simply using the overrides, but also modalContentClassName, modalChildrenClassName & modalContainerClassName don't seem to do the trick.

overrides: {
    "connect-modal": {
      bg: { light: Colors.Purple300, dark: Colors.Purple300 },
      focusedBg: { light: Colors.Purple300, dark: Colors.Purple300 },
    },
    button: {
      bg: { light: Colors.Purple200, dark: Colors.Purple200 },
    },
    "connect-modal-wallet-button": {
      bg: { light: Colors.Purple400, dark: Colors.Purple400 },
    },
    "connect-modal-wallet-button-sublogo": {
      bg: { light: Colors.Purple400, dark: Colors.Purple400 },
    },
    "connect-modal-head-title": {
      bg: { light: Colors.Purple300, dark: Colors.Purple300 },
    },
    "connect-modal-wallet-button-label": {
      bg: { light: Colors.Purple300, dark: Colors.Purple300 },
    },
    "connect-modal-install-button": {
      bg: { light: Colors.Purple200, dark: Colors.Purple200 },
    },
  },
  defaultTheme: "dark",

Screencast from 2023-12-15 03:20:06 PM.webm

CalicoNino commented 7 months ago

If anyone is facing this issue, you can add css styles to the existing styles classes

._1n3anio5 {
  background-color: transparent !important;
}

.nr9ap31 {
  z-index: 1000 !important;
}