Customize the Thread
Adjust your Thread's appearance to match your design
Adjust the CSS and CSS variables
You can alter a Cord thread to closely mirror your application's design language. With the code below, you can change the Thread component to use the colors from your application's color palette. Here, we're assuming that our example application uses a bright orange color for its call-to-action buttons.
cord-thread {
--cord-thread-send-button-background-color: #ee6611;
--cord-thread-send-button-background-color--hover: #ff7722;
--cord-thread-send-button-background-color--active: #dd5500;
--cord-thread-send-button-background-color--active: #dd5500;
--cord-thread-send-button-background-color--disabled: #70665f;
}
This change will give you a thread that looks something like this:
Take the customization even further
You can customize many more aspects of Cord's components. For the full description of what's available for the <Thread /> component, check out the full CSS variable list here.
If you'd like to dive deeply into the topic of CSS customization, read our in-depth CSS guide.
Next Step: Authenticate your user
In the next step, you'll authenticate your user and generate a client authentication token →
