Theming
Customize the editor to match your brand identity
Why Customize the Theme
- Brand consistency Editor matches your platform's look and feel
- White-label experience Seamless integration without third-party branding
- User trust Familiar interface increases adoption
Logo Customization
Replace the default logo with your own:
window['ClaspoEditor'].init({
logo: {
imageUrl: 'https://your-domain.com/logo.png',
link: 'https://your-domain.com',
},
});See EditorLogoI for all options.
Theme Configuration
The editor uses Claspo's default theme. Override specific tokens to match your brand:
window['ClaspoEditor'].init({
theme: {
primaryColor: '#008060',
primaryFontFace: 'Inter, sans-serif',
largeBorderRadius: '12px',
// ... override only what you need
},
});See EditorThemeI for all available tokens.
Default Claspo Theme
const primaryColor = '#F3492C';
const CLASPO_THEME: EditorThemeI = {
primaryFontFace: 'Montserrat, sans-serif',
primaryColor,
secondaryColor: '#ffffff',
successColor: 'rgba(39, 193, 115, 1)',
warningColor: 'rgba(255, 142, 10, 1)',
infoColor: '#6aabbe',
errorColor: 'rgba(231, 51, 36, 1)',
disabledFontColor: '#8D8C94',
primaryFontColor: '#2C2C2C',
secondaryFontColor: '#8F8F8F',
buttonFontWeight: '600',
primaryButtonFontColor: '#FFFFFF',
secondaryButtonFontColor: '#2C2C2C',
secondaryButtonBorderColor: primaryColor,
secondaryButtonBorderWidth: '2px',
buttonLoadingBackground: 'repeating-linear-gradient(60deg, transparent, transparent 40px, rgba(0,0,0,.5) 40px, rgba(0,0,0,.5) 80px), rgba(250,250,250,.5)',
buttonHeight: '44px',
buttonPadding: '10px 30px',
buttonPaddingWithIcon: '6px 20px 6px 12px',
inputLoadingBackground: 'repeating-linear-gradient(60deg, transparent, transparent 40px, rgba(0,0,0,.5) 40px, rgba(0,0,0,.5) 80px), rgba(250,250,250,.5)',
textInputDefaultBorderColor: 'transparent',
textInputDefaultBorderWidth: '1px',
textInputDefaultBackgroundColor: '#EDEDED',
textInputPadding: '12px 12px 11px',
checkboxDefaultBorderColor: primaryColor,
checkboxDefaultBorderWidth: '2px',
checkboxDefaultBackgroundColor: '#fff',
checkboxSelectedIconColor: '#ffffff',
checkboxSize: '22px',
radioButtonDefaultBackgroundColor: '#fff',
switchDefaultBackgroundColor: '#D9D9D9',
switchIconColor: '#fff',
selectDefaultBorderColor: 'transparent',
selectDefaultBorderWidth: '0px',
selectDefaultBackgroundColor: '#EDEDED',
selectPadding: '0px 16px',
largeBorderRadius: '22px',
smallBorderRadius: '10px',
contextMenuSelectedBackgroundColor: '#f6f6f6',
snackBarPositionTop: '65px',
snackBarPadding: '14px 36px 14px 16px',
darkerPrimaryColorKey: '#DB2C0E',
lighterPrimaryColor: '#FFBFB4',
veryLightPrimaryColor: '#FEEDEA',
iconPickerColor: '#9F29B0',
notification: {
padding: '15px 25px 15px 25px',
borderRadius: '20px',
boxShadow: 'none',
textColor: 'inherit',
warningBackgroundColor: '#fff2cc',
fontSize: 'inherit',
},
dialog: {
titleFontSize: '18px',
titleFontWeight: '500',
},
checkbox: {
valueFontSize: '16px',
valueFontColor: '#2C2C2C',
},
select: {
filterBorderRadius: '22px',
filterPadding: '12px 0 11px 12px',
filterIconPadding: '12px 12px 11px 5px',
},
input: {
labelMargin: '0 0 8px 0',
textInputTextareaPadding: '5px 12px',
searchInputBackgroundIconColor: '#EDEDED',
searchInputBorderRadius: '22px',
searchInputIconColorActive: '#5f5f5f',
},
dropdown: {
borderRadius: '20px',
padding: '15px',
leftRightIndent: '20px',
},
editorOption: {
customPrizeImageSize: '44px',
borderDefaultColor: '#E2E4E9',
borderClearButtonColor: '#F3492C',
borderRadiusToggleButtons: '18px',
descriptionFontSize: '12px',
backgroundToggleButtonSelected: '#EDEDED',
backgroundToggleTextButtonSelected: '#FFFFFF',
backgroundToggleButtonHover: '#e6e6e6',
defaultBorder: 'none',
},
editorPrizeOption: {
gridTemplateColumns: '160px 415px 220px 20px',
decrementIncrementGap: '1px',
chancePseudoBorderRight: '',
customEsInputFormWidth: '360px',
confirmButtonBottomPadding: '20px 40px',
},
dropzone: {
codeFont: 'Montserrat, sans-serif',
},
slidebar: {
padding: '',
margin: '0 0 25px 0',
titleFontSize: '24px',
titleFontWeight: '600',
},
editorPanel: {
smallBorderRadius: '10px',
rewardsInputWidth: '80px',
errorNotificationBackgroundColor: '#FFFBD5',
errorNotificationLeftPadding: '64px',
tabsBackgroundColor: '#F2F3F5',
tabBackgroundColor: '#FFFFFF',
tabsDeviceBackgroundColor: '#FFFFFF',
tabHoverBackgroundColor: '#e6e6e6',
tabHoverColor: '',
tabBorderRadius: '20px',
borderLeftWidthSelected: '2px',
borderTopWidthSelected: '2px',
borderRightWidthSelected: '2px',
borderBottomWidthSelected: '2px',
borderBottomWidth: '0',
tabPadding: '2px 2px 3px',
tabHeaderPadding: '2px',
tabButtonPadding: '4px 20px',
tabHeight: '32px',
tabGap: '5px',
colorPickerBoxShadow: '',
colorPickerBorder: '1px solid #9F9FA8',
},
editorInputs: {
selectDefaultAlignItems: 'center',
selectDefaultJustifyContent: 'space-between',
selectInputDefaultMinHeight: '36px',
selectInputDefaultLineHeight: '36px',
inputDefaultMinWidth: '55px',
inputSmallMinWidth: '50px',
selectBodyWidth: '100%',
searchInputBoxShadow: '',
searchInputBackgroundIconColor: '#FFFFFF',
searchInputBorderRadius: '22px',
searchInputBackgroundActiveColor: '#FFFFFF',
searchInputBorderActiveColorHover: '2px solid #ffd1b2',
searchInputBackgroundActiveMargin: '1px',
selectTextParamsWidth: '200px',
},
};Example: Shopify Theme
const primaryColor = '#008060';
const SHOPIFY_THEME: EditorThemeI = {
primaryFontFace: "Inter, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
primaryColor,
secondaryColor: '#ffffff',
successColor: '#047B5D',
warningColor: '#FFB800',
infoColor: '#005BD3',
errorColor: '#C70A24',
disabledFontColor: '#B5B5B5',
primaryFontColor: '#303030',
secondaryFontColor: '#616161',
buttonFontWeight: '550',
primaryButtonFontColor: '#FFFFFF',
secondaryButtonFontColor: '#303030',
secondaryButtonBorderColor: '#E3E3E3',
secondaryButtonBorderWidth: '1px',
buttonLoadingBackground: 'repeating-linear-gradient(60deg, transparent, transparent 40px, rgba(0,0,0,.3) 40px, rgba(0,0,0,.3) 80px), rgba(250,250,250,.5)',
buttonHeight: '36px',
buttonPadding: '8px 16px',
buttonPaddingWithIcon: '8px 16px 8px 12px',
inputLoadingBackground: 'repeating-linear-gradient(60deg, transparent, transparent 40px, rgba(0,0,0,.3) 40px, rgba(0,0,0,.3) 80px), rgba(250,250,250,.5)',
textInputDefaultBorderColor: '#E3E3E3',
textInputDefaultBorderWidth: '1px',
textInputDefaultBackgroundColor: '#FFFFFF',
textInputPadding: '8px 12px',
checkboxDefaultBorderColor: '#8A8A8A',
checkboxDefaultBorderWidth: '2px',
checkboxDefaultBackgroundColor: '#FFFFFF',
checkboxSelectedIconColor: '#FFFFFF',
checkboxSize: '18px',
radioButtonDefaultBackgroundColor: '#FFFFFF',
switchDefaultBackgroundColor: '#B5B5B5',
switchIconColor: '#FFFFFF',
selectDefaultBorderColor: '#E3E3E3',
selectDefaultBorderWidth: '1px',
selectDefaultBackgroundColor: '#FFFFFF',
selectPadding: '8px 12px',
largeBorderRadius: '12px',
smallBorderRadius: '8px',
contextMenuSelectedBackgroundColor: '#F7F7F7',
snackBarPositionTop: '65px',
snackBarPadding: '12px 16px',
darkerPrimaryColorKey: '#1A1A1A',
lighterPrimaryColor: '#616161',
veryLightPrimaryColor: '#F1F1F1',
iconPickerColor: '#8051FF',
notification: {
padding: '12px 16px',
borderRadius: '8px',
boxShadow: '0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.1)',
textColor: '#303030',
warningBackgroundColor: '#FFF8DB',
fontSize: '14px',
},
dialog: {
titleFontSize: '16px',
titleFontWeight: '650',
},
checkbox: {
valueFontSize: '14px',
valueFontColor: '#303030',
},
select: {
filterBorderRadius: '8px',
filterPadding: '8px 12px',
filterIconPadding: '8px 12px 8px 8px',
},
input: {
labelMargin: '0 0 4px 0',
textInputTextareaPadding: '8px 12px',
searchInputBackgroundIconColor: '#F1F1F1',
searchInputBorderRadius: '8px',
searchInputIconColorActive: '#303030',
},
dropdown: {
borderRadius: '12px',
padding: '8px',
leftRightIndent: '8px',
},
editorOption: {
customPrizeImageSize: '40px',
borderDefaultColor: '#E3E3E3',
borderClearButtonColor: '#C70A24',
borderRadiusToggleButtons: '8px',
descriptionFontSize: '12px',
backgroundToggleButtonSelected: '#F1F1F1',
backgroundToggleTextButtonSelected: '#FFFFFF',
backgroundToggleButtonHover: '#E3E3E3',
defaultBorder: '1px solid #E3E3E3',
},
editorPrizeOption: {
gridTemplateColumns: '160px 415px 220px 20px',
decrementIncrementGap: '1px',
chancePseudoBorderRight: '',
customEsInputFormWidth: '360px',
confirmButtonBottomPadding: '16px 24px',
},
dropzone: {
codeFont: "ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace",
},
slidebar: {
padding: '',
margin: '0 0 20px 0',
titleFontSize: '20px',
titleFontWeight: '650',
},
editorPanel: {
smallBorderRadius: '8px',
rewardsInputWidth: '80px',
errorNotificationBackgroundColor: '#FEE8EB',
errorNotificationLeftPadding: '64px',
tabsBackgroundColor: '#F1F1F1',
tabBackgroundColor: '#FFFFFF',
tabsDeviceBackgroundColor: '#FFFFFF',
tabHoverBackgroundColor: '#E3E3E3',
tabHoverColor: '',
tabBorderRadius: '8px',
borderLeftWidthSelected: '1px',
borderTopWidthSelected: '1px',
borderRightWidthSelected: '1px',
borderBottomWidthSelected: '1px',
borderBottomWidth: '0',
tabPadding: '2px',
tabHeaderPadding: '2px',
tabButtonPadding: '6px 16px',
tabHeight: '32px',
tabGap: '4px',
},
editorInputs: {
selectDefaultAlignItems: 'center',
selectDefaultJustifyContent: 'space-between',
selectInputDefaultMinHeight: '36px',
selectInputDefaultLineHeight: '36px',
inputDefaultMinWidth: '55px',
inputSmallMinWidth: '50px',
selectBodyWidth: '100%',
searchInputBoxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)',
searchInputBackgroundIconColor: '#FFFFFF',
searchInputBorderRadius: '8px',
searchInputBackgroundActiveColor: '#FFFFFF',
searchInputBorderActiveColorHover: '2px solid #005BD3',
searchInputBackgroundActiveMargin: '0',
selectTextParamsWidth: '200px',
},
};Updated 1 day ago