Theming
Gordian provides a default theme for the seatmap and baggage selection. However, you can configure the theme of those components to match your brand and site.
To do so, pass a theme
object in when calling Gordian.showUpsell
:
Gordian.showUpsell({
container: document.getElementById("upsell-container"),
display: "card",
allowProducts: ["seats"],
theme: {
textPrimary: '#002244',
},
})
Note
While seatmap and baggage selection visualization can be configured through the theme
parameter, the widget itself uses a default theme. To customize it to fit your brand colors, fonts, and other styling, reach out to your account manager.
Theme Configuration
You can use the theme
key to configure and customize visualization of the seatmap and baggage selection. The structure of the theme
object is as follows:
{
textPrimary: '#120C80', // main text color
textSecondary: '#4D4B6D', // secondary text color
title: '#120C80', // e.g. the passenger / place names in the drop down
primary: '#120C80', // primary button color
secondary: '#4D4B6D', // secondary button color
buttonBorderRadius: '0.25rem',
buttonText: '#000000',
alert: '#E06168',
seats: { // These represent the colors of the seats depending on the category
1: {
fill: '#9BC8E4', // the seat fill color
stopColor: '#82B4D3', // the gradient stop color for the seat fill
labelColor: '#000000', // the label color
borderColor: '#FFFFFF' // the border color
},
2: { //
fill: '#8FE9FF',
stopColor: '#7AD2E8',
labelColor: '#000000',
borderColor: '#FFFFFF'
},
3: {
fill: '#FFCE51', // Preferred
stopColor: '#E7B73D',
labelColor: '#000000',
borderColor: '#FFFFFF'
},
4: { // Standard Seat
fill: '#AADB72',
stopColor: '#8EBD59',
labelColor: '#000000',
borderColor: '#FFFFFF'
},
5: {
fill: '#faf18f',
stopColor: '#faf18f',
labelColor: '#29425b',
borderColor: '#FFFFFF'
},
6: {
fill: '#004b94',
stopColor: '#004b94',
labelColor: '#29425b',
borderColor: '#FFFFFF'
},
not_available: {
fill: '#D9D9D9', // color used for the bg of unavailable seats
stopColor: '#D9D9D9',
labelColor: '#29425b',
borderColor: '#FFFFFF'// color used to draw the "X" on unavailable seats
},
selected_seat: {
fill: '#5C54BD',
stopColor: '#372F90',
labelColor: '#29425b',
borderColor: '#FFFFFF'
}
}
}
Note
It is not necessary to send all the values of the theme. You can send only those that you would like to change - the rest will extend from the base theme.