Styling

The Etherspot BUIDLER React Component can be styled to match your theme. See an example below of a theme object that can be passed to the Etherspot component:

Example

const theme = {
  color: {
    background: {
      main: "#221f33",
      topMenu: "#443d66",
      topMenuButton: "#ff884d",
      card: "#2b2640",
      button: "#ff884d",
      closeButton: "#ff884d",
      selectInputToggleButton: "#ff884d",
      selectInput: "#443d66",
      selectInputExpanded: "#1a1726",
      selectInputImagePlaceholder: "#443d66",
      textInput: "#1a1726",
      switchInput: "#1a1726",
      switchInputActiveTab: "#443d66",
      switchInputInactiveTab: "transparent",
      pill: "#2b2640",
      checkboxInputInactive: "#665c99",
      toDropdownColor: "#F8EFEA",
    },
    text: {
      selectInput: "#ffeee6",
      selectInputOption: "#ffeee6",
      selectInputOptionSecondary: "#ffeee6",
      searchInput: "#998ae6",
      searchInputSecondary: "#998ae6",
      outerLabel: "#998ae6",
      innerLabel: "#998ae6",
      topMenu: "#998ae6",
      main: "#ffeee6",
      topBar: "#998ae6",
      buttonSecondary: "#998ae6",
      card: "#ffeee6",
      cardTitle: "#ffeee6",
      button: "#fff",
      errorMessage: "#ff4d6a",
      textInput: "#ffeee6",
      textInputSecondary: "#ffeee6",
      switchInputActiveTab: "#ffeee6",
      switchInputInactiveTab: "#bbb8cc",
      selectInputImagePlaceholder: "#ffeee6",
      cardDisabled: "#605e5e",
      pill: "#bbb8cc",
      pillValue: "#ffeee6",
    },
  },
};

This object can then be passed directly to the Etherspot component:

<Etherspot
  themeOverride={theme}
/>