Using a default theme

Choose your theme by adding the theme name as a parameter to the chariot-connect modal, as below.

<chariot-connect 
	id="chariot" 
	cid="GENERATED_CONNECT_IDENTIFIER" 
	theme="THEME_NAME" <!-- Add this parameter ->
>
</chariot-connect>

<ChariotConnect 
  cid="GENERATED_CONNECT_IDENTIFIER" 
  theme="THEME_NAME" <!-- Add this parameter -> 
  ...
/>

We provide the options below as default themes. If theme is not defined, DefaultTheme will be used.

`DefaultTheme`

`LightModeTheme`

`LightBlueTheme`

`GradientTheme`

Creating a custom theme

To create a custom theme for the Chariot Connect button, create an object with all desired properties that you wish to change. Utilize Tailwind CSS styling in the definition of these properties.

🚧
Important Note for Style Customizations
Style customizations for Chariot Connect require that all available CSS be packaged within the chariot-connect.umd.js bundle. The problem is that for Chariot to allow any customizations, we would need to include the entire tailwindcss package (~2.4Mb uncompressed) which would degrade performance and load times to an unacceptable level. While performance is a concern, we also realize the need for a consistent and seamless user experience and are also committed to providing configurations for size, padding, border radius, etc. on top of the pre-built themes that we offer.

// get the element from the DOM
const chariot = document.getElementById("chariot")

// define your alterations using valid properties from the table below
const alterations = {
	textSizeMain: "text-lg",
	corners: "rounded-sm",
};

// register your new theme with a custom name
chariot.registerTheme("myTheme", alterations);

<ChariotConnect 
  cid="GENERATED_CONNECT_IDENTIFIER" 
  theme={
        textSizeMain: "text-lg",
        corners: "rounded-sm",
    }
  ...
/>

Theme Properties

Parameter Name	Use	Allowed value
`textCenter`	The alignment of the text	text-align
`textSizeMain`	The size of the title font	font-size
`textSizeSubtitle`	The size of the subtitle font	font-size
`width`	The width of the button	width up to `12` or `48px`
`height`	The height of the button	height up to `12` or `48px`
`xPadding`	The padding in the x-direction	padding-x up to `12` or `48px`
`yPadding`	The padding in the y-direction	padding-y up to `12` or `48px`
`textSubtitle`	The text that will be displayed as the subtitle	A string containing the text you want to display
`logoWidth`	The width of the logo (changes the size)	width up to `12` or `48px`
`corners`	The border radius of the logo	border-radius, not including individual corner adjustments
`hoverState`	Whether or not the button has a hover state. Defaults to `true`.	`true` or `false`