Theming

To apply a custom theme to the components, you can simply set the following css variables. We've included the default values below.

Theme Configuration

--vi-font-family: ui-sans-serif, system-ui, sans-serif;
--vi-primary-color: #FF6B00;
--vi-primary-contrast-color: #FFF1E3;
--vi-font-sm: 0.8rem;
--vi-font-md: 0.9rem;
--vi-font-lg: 1.05rem;
--vi-font-xl: 1.25rem;
--vi-secondary-color: #FF6B00;
--vi-secondary-contrast-color: #FFF1E3;
--vi-bg-color: #ffffff;
--vi-success-color: #FF6B00;
--vi-success-bg-color: #EFEFEE;
--vi-success-border-color: #918F8F;
--vi-danger-color: #C71414;
--vi-danger-bg-color: #FDEDED;
--vi-danger-border-color: #C71414;

--vi-accept-color: #FF6B00;
--vi-accept-bg-color: #EFEFEE;
--vi-accept-border-color: #918F8F;
--vi-decline-color: #918F8F;
--vi-decline-bg-color: #EFEFEE;
--vi-decline-border-color: #918F8F;

--vi-warning-color: #fbbf24;
--vi-warning-bg-color: #fffbeb;
--vi-warning-border-color: #fbbf24;
--vi-tag-color: #FF6B00;
--vi-tag-contrast-color: #ffffff;
--vi-tag-display: block;
--vi-border-color: #949293;
--vi-border-radius: 20px;
--vi-action-border-radius: 4px;
--vi-container-padding: 24px 16px 16px 16px;

Theme Playground

Live Editor

<div style={{ background: "white", padding: "8px" }}> <style>{` :root { --vi-font-family: "Montserrat", Helvetica, Arial, Lucida, sans-serif; --vi-tag-color: #1970c2; --vi-accept-color: #1970c2; } `} </style> <registration-cancellation client-id="test_RGMDV4FV4BNK4TSPT7DOQVC3P9HKEXTQ" customer-email-address="test01@verticalinsure.com" customer-state="MN" insurable-amount="50000" event-start-date={new Date(new Date().getTime() + 86400000).toISOString().substring(0, 10)} event-end-date={new Date(new Date().getTime() + 86400000).toISOString().substring(0, 10)} participant-first-name="John" participant-last-name="Doe" ></registration-cancellation> </div>

<div style={{ background: "white", padding: "8px" }}>
  <style>{`
    :root {
      --vi-font-family: "Montserrat", Helvetica, Arial, Lucida, sans-serif;
      --vi-tag-color: #1970c2;
      --vi-accept-color: #1970c2;
    }
`}
</style>
  <registration-cancellation
    client-id="test_RGMDV4FV4BNK4TSPT7DOQVC3P9HKEXTQ" 
    customer-email-address="test01@verticalinsure.com"
    customer-state="MN"
    insurable-amount="50000"
    event-start-date={new Date(new Date().getTime() + 86400000).toISOString().substring(0, 10)}
    event-end-date={new Date(new Date().getTime() + 86400000).toISOString().substring(0, 10)}
    participant-first-name="John"
    participant-last-name="Doe" 
  ></registration-cancellation>
</div>

Result

Loading...