Etherspot
Search…
⌃K

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}
/>