Flow supports visual customization, which allows you to match the design of your site with the styling option. The layout of each flow stays consistent, but you can modify colors, buttons, borders, padding, and more.

{
  "theme": "light",
  "variables": {
    "backgroundColor": "",
    "primaryTextColor": "",
    "secondaryTextColor": "",
    "primaryColor": "",
    "tabBackgroundColor": "",
    "tabHoverBackgroundColor": "",
    "tabBorderColor": "",
    "tabHoverBorderColor": "",
    "buttonBackgroundColor": "",
    "buttonTextColor": "",
    "buttonHoverTextColor": "",
    "buttonHoverBackgroundColor": "",
    "inputBackgroundColor": "",
    "inputBorderColor": "",
    "tertiaryTextColor": "",
    "buttonDisabledBackgroundColor": "",
    "buttonDisabledTextColor": "",
    "inputPlaceholderColor": "",
    "borderRadius": "",
  }
}

​
Style configurations

​
Theme

The light and dark theme allow you to control the general apperance of elements of flows that you cannot configure individually, such as the color of the Dots logo or the datepicker icon, defaults to light.

​
Variables

Variables such as backgroundColor and primaryInputColor work like CSS variables and allow you to customize the looks of flow components individually.

VariableDescription
backgroundColorThe background color of the flow
primaryTextColorThe color of texts used in titles and labels
secondaryTextColorThe color of secondary texts used in sublabels in buttons
tertiaryTextColorThe color of tertiary texts such as the default payout method indicator or the Visit dashboard link at the bottom of the flow page
primaryColorThe primary color of the flow theme, such as button hovers or highlights
tabBackgroundColorThe background color of the rail tab
tabHoverBackgroundColorThe background color of the rail tab when the cursor hovers over it
tabBorderColorThe border color of the rail tab
tabHoverBorderColorThe border color of the rail tab when the cursor hovers over it
buttonBackgroundColorThe background color of action buttons located at the bottom of each flow page
buttonTextColorThe text color of action buttons located at the bottom of each flow page
buttonHoverTextColorThe text color of action buttons when the cursor hovers over it
buttonHoverBackgroundColorThe background color of action button when the cursor hovers over it
buttonDisabledBackgroundColorThe background color of action buttons when they are disabled
buttonDisabledTextColorThe text color of action buttons when they are disabled
inputBackgroundColorThe background color of inputs such as checkboxes or textfields
inputBorderColorThe border color of inputs
inputPlaceholderColorThe placeholder color of inputs
borderRadiusThe border radius of the buttons, tabs, icons, and inputs

​
Implementation

To apply the styling to your flow, first stringify the configurations, then URL encode it and add it as a query parameter ?styles={url_encoded_config} to the flow link

​
Example Flow Styling

This example customize the flow styles with the following configurations:

NodeJS
const configurations = {
  theme: "dark",
  variables: {
    backgroundColor: "#000000",
    primaryTextColor: "#ffffff",
    secondaryTextColor: "#9ca3af",
    primaryColor: "#c88bc4",
    tabBackgroundColor: "#111827",
    tabHoverBackgroundColor: "#374151",
    tabBorderColor: "#e5e7eb",
    tabHoverBorderColor: "#7dd3fc",
    buttonBackgroundColor: "#c88bc4",
    buttonTextColor: "#ffffff",
    buttonHoverTextColor: "#ffffff",
    buttonHoverBackgroundColor: "#a672a2",
    inputBackgroundColor: "#111827",
    inputBorderColor: "#c88bc4",
    tertiaryTextColor: "",
    buttonDisabledBackgroundColor: "#1f2937",
    buttonDisabledTextColor: "#d1d5db",
    inputPlaceholderColor: "#4b5563",
    borderRadius: "8px",
  },
};

const url_encoded_config = encodeURIComponent(JSON.stringify(configurations));

const flowURI =
  "https://my.senddotssandbox.com/flow/5f0f8f8f-f8f8-f8f8-f8f8-f8f8f8f8f8f8?styles=" +
  url_encoded_config;