Appearance
The JustWeb3 Widget offers flexible appearance customization, allowing you to style it to match your dApp's branding. You can modify colors, logos, and the general look and feel of the widget with ease. Below is a detailed guide on how to configure the appearance of your widget.
Primary Color
The primary
color controls the main accent color used throughout the widget for buttons, links, and other interactive elements. You can specify any valid CSS color format (hex, rgb, hsl, etc.).
const justweb3Config: JustWeb3ProviderConfig = {
color: {
primary: 'hsl(216, 90%, 58%)', // Example: Sky Blue
},
};
Background Color
The background
color controls the background color of the widget. This is especially useful to make the widget fit seamlessly into your app’s design.
const justweb3Config: JustWeb3ProviderConfig = {
color: {
background: 'hsl(0, 0%, 100%)', // Example: White
},
};
Destructive Color
The destructive
color is used for warning or destructive actions (e.g., delete, reset). You can customize this to match your branding guidelines.
const justweb3Config: JustWeb3ProviderConfig = {
color: {
destructive: 'hsl(0, 100%, 50%)', // Example: Red
},
};
Custom Logo
You can provide a custom logo to display in the widget interface. This logo helps reinforce your branding within the JustWeb3 Widget.
Add the URL to your logo image in the
logo
field of the configuration.
const justweb3Config: JustWeb3ProviderConfig = {
logo: 'https://yourdomain.com/your-logo.png',
};
Ensure the logo has appropriate dimensions for best results. We recommend a 200x200px PNG or SVG.
Custom Fonts (Advanced)
While the widget doesn't directly expose a font customization option, you can apply custom fonts through global CSS in your app. To do this, apply the font styles in your project and ensure that your widget is contained within those styled elements.
/* In your global CSS file */
body {
--justweb3-font-family: 'YourCustomFont', sans-serif;
}
Full Example Configuration
Below is an example configuration showcasing appearance customization with colors and a custom logo:
const justweb3Config: JustWeb3ProviderConfig = {
config: {
origin: "http://localhost:3000/",
domain: "localhost",
signInTtl: 86400000,
},
openOnWalletConnect: true,
allowedEns: "all",
logo: "https://yourdomain.com/your-logo.png",
ensDomains: [
{
ensDomain: "your ens domain",
apiKey: "YOUR_JUSTANAME_API_KEY",
chainId: 1,
}
],
color: {
primary: 'hsl(216, 90%, 58%)', // Sky Blue
background: 'hsl(0, 0%, 100%)', // White
destructive: 'hsl(0, 100%, 50%)' // Red
}
};
This setup ensures the widget integrates smoothly with your dApp's design while maintaining a consistent brand experience.
Last updated
Was this helpful?