Appearance
Customize the look and feel of the Blux modal to match your dApp's branding.
Blux is easy to style so it fits the look and feel of your app. You can adjust fonts, colors, borders, and backgrounds to match your design system. Every field is optional — if you leave something out, Blux falls back to the default theme for that field.
Setup
Pass an appearance object when initializing Blux:
<BluxProvider
config={{
appName: "MyApp",
networks: [networks.mainnet],
appearance: {
accentColor: "#0070f3",
borderRadius: "16px",
},
}}
>
{children}
</BluxProvider>createConfig({
appName: "MyApp",
networks: [core.networks.mainnet],
appearance: {
accentColor: "#0070f3",
borderRadius: "16px",
},
});Default Themes
Blux ships with built-in light and dark defaults applied automatically based on the user's system preference.
{
logo: '',
font: 'Manrope',
textColor: '#000000',
accentColor: '#0c1083',
background: '#ffffff',
fieldBackground: '#ffffff',
borderRadius: '24px',
borderColor: '#cdceee',
borderWidth: '1px',
outlineWidth: '1px',
}{
logo: '',
font: 'Manrope',
textColor: '#ffffff',
accentColor: '#ffffff',
background: '#000000',
fieldBackground: '#1a1a1a',
borderRadius: '24px',
borderColor: '#333333',
borderWidth: '1px',
outlineWidth: '1px',
}Properties
| Property | Type | Description |
|---|---|---|
logo | string | URL of your app logo displayed in the modal |
font | string | Font family for all modal text |
textColor | string | Main text color |
accentColor | string | Primary highlight or action color |
background | string | Modal background color or image |
fieldBackground | string | Background color for input fields |
borderRadius | string | Corner radius for UI elements (e.g. 16px) |
borderColor | string | Border color for elements |
borderWidth | string | Border width (e.g. 1px, 0) |
backdropBlur | string | Blur intensity behind the modal (e.g. 8px) |
backdropColor | string | Overlay color behind the modal |
boxShadow | string | Box shadow applied to the modal |
outlineWidth | string | Outline width — falls back to borderWidth |
outlineColor | string | Outline color — falls back to borderColor |
outlineRadius | string | Outline corner radius — falls back to borderRadius |
Want to experiment with the appearance settings visually? Try the live demo →