Customize Blink Styles

Blinks component with dark theme styling

Blinks component with light theme styling

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

Style presets are mapped to classes in the following way:

x-dark -> .x-dark
x-light -> .x-light
default -> .dial-light
custom -> .custom

CSS Variables

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);
}

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. Comparison of different Blinks theme styles

GETTING STARTED

CLIENT

PROVIDER (API)

STARTERS

API REFERENCE

Style Presets

CSS Variables

​Style Presets

​CSS Variables

Style Presets

CSS Variables