Using a default theme

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

1 <chariot-connect 
2 	id="chariot" 
3 	cid="GENERATED_CONNECT_IDENTIFIER" 
4 	theme="THEME_NAME" <!-- Add this parameter ->
5 >
6 </chariot-connect>

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

Creating a custom theme

To create a custom theme for the Chariot Connect button, create an object with the 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.

1 // get the element from the DOM
2 const chariot = document.getElementById("chariot")
3 
4 // define your alterations using valid properties from the table below
5 const alterations = {
6 	width: "w-12",
7 	height: "h-8",
8 };
9 
10 // register your new theme with a custom name
11 chariot.registerTheme("myTheme", alterations);

Theme Properties

Parameter Name	Use	Allowed value
`width`	The width of the button	width up to `16` or `64px`
`height`	The height of the button	height at least `9` or `36px` up to `12` or `48px`
`showExtendedText`	Show an extended text (`Give with Donor Advised Fund`) version of the DAFpay button text	`true` or `false` (this value is `false` by default)

Button Styles

Using a default theme

`DefaultTheme`

`LightModeTheme`

`LightBlueTheme`

`GradientTheme`

Creating a custom theme

Important Note for Style Customizations

Theme Properties

1	<chariot-connect
2	id="chariot"
3	cid="GENERATED_CONNECT_IDENTIFIER"
4	theme="THEME_NAME" <!-- Add this parameter ->
5	>
6	</chariot-connect>

1	// get the element from the DOM
2	const chariot = document.getElementById("chariot")
3
4	// define your alterations using valid properties from the table below
5	const alterations = {
6	width: "w-12",
7	height: "h-8",
8	};
9
10	// register your new theme with a custom name
11	chariot.registerTheme("myTheme", alterations);