Customize Blink Styles
Dialect's Blinks SDK supports customizable styles so you can render Blinks that match the style of your dApp or 3rd party site, such as Twitter.
.png)
.png)
To render a Blink with a preset, pass stylePreset
prop (which defaults to default
, the dial.to
theme) to <Blink />
component:
import { Blink } from '@dialectlabs/blinks';
...
return <Blink stylePreset="x-dark" ... />;
Style presets are mapped to classes in the following way:
x-dark
->.x-dark
x-light
->.x-light
default
->.dial-light
custom
->.custom
To override a certain preset use the following CSS variables:
/*
Use .x-dark, .x-light, .dial-light, or .custom classes
.custom - does not contain any colors, radii or shadow
*/
.blink.x-dark {
--blink-bg-primary: #202327;
--blink-button: #1d9bf0;
--blink-button-disabled: #2f3336;
--blink-button-hover: #3087da;
--blink-button-success: #00ae661a;
--blink-icon-error: #ff6565;
--blink-icon-error-hover: #ff7a7a;
--blink-icon-primary: #6e767d;
--blink-icon-primary-hover: #949ca4;
--blink-icon-warning: #ffb545;
--blink-icon-warning-hover: #ffc875;
--blink-input-bg: #202327;
--blink-input-stroke: #3d4144;
--blink-input-stroke-disabled: #2f3336;
--blink-input-stroke-error: #ff6565;
--blink-input-stroke-hover: #6e767d;
--blink-input-stroke-selected: #1d9bf0;
--blink-stroke-error: #ff6565;
--blink-stroke-primary: #1d9bf0;
--blink-stroke-secondary: #3d4144;
--blink-stroke-warning: #ffb545;
--blink-text-brand: #35aeff;
--blink-text-button: #ffffff;
--blink-text-button-disabled: #768088;
--blink-text-button-success: #12dc88;
--blink-text-error: #ff6565;
--blink-text-error-hover: #ff7a7a;
--blink-text-input: #ffffff;
--blink-text-input-disabled: #566470;
--blink-text-input-placeholder: #6e767d;
--blink-text-link: #6e767d;
--blink-text-link-hover: #949ca4;
--blink-text-primary: #ffffff;
--blink-text-secondary: #949ca4;
--blink-text-success: #12dc88;
--blink-text-warning: #ffb545;
--blink-text-warning-hover: #ffc875;
--blink-transparent-error: #aa00001a;
--blink-transparent-grey: #6e767d1a;
--blink-transparent-warning: #a966001a;
--blink-border-radius-rounded-lg: 0.25rem;
--blink-border-radius-rounded-xl: 0.5rem;
--blink-border-radius-rounded-2xl: 1.125rem;
--blink-border-radius-rounded-button: 624.9375rem;
--blink-border-radius-rounded-input: 624.9375rem;
/* box-shadow */
--blink-shadow-container: 0px 2px 8px 0px rgba(59, 176, 255, 0.22), 0px 1px
48px 0px rgba(29, 155, 240, 0.24);
}
tip
Be sure to override with CSS specificity in mind or by import order.
Using these CSS classes, you can customize the styles to fit the UI of your application.
.png)