Theming & Copy

The designer modal is fully themeable. Pass a theme object to Treatink.init and every value is stamped onto the modal root as a --tk-* CSS custom property; pass copy to override any user-visible string.

Treatink.init({
  apiKey: 'pk_test_quickstart',
  channel: 'petshop.example.com',
  theme: { primary: '#8EA0F6', accent: '#EA8D00', borderRadius: '15px' },
  copy: { headerTitle: 'Personalize Your Product', saveButton: 'Save Customization' },
});

Theme tokens

Every ThemeConfig key, its CSS variable, and its default (the exact Treatink store palette):

Key	CSS variable	Default	Used for
primary	--tk-primary	#a99cdf	primary UI color (purple)
primaryStrong	--tk-primary-strong	#8c7ec2	stronger primary (hover, emphasis)
panelBackground	--tk-panel	#e2e6ff	control panels
accent	--tk-accent	#ffa518	call-to-action accents (orange)
accentHover	--tk-accent-hover	#dd9133	accent hover state
headerBackground	--tk-header-background	#F26B1D	modal header chrome
headerText	--tk-header-text	#ffffff	modal header text
surface	--tk-surface	#ffffff	card/dialog surfaces
surfaceAlt	--tk-surface-alt	#F6F6FC	alternate surfaces
borderRadius	--tk-border-radius	20px	cards
buttonRadius	--tk-radius-button	15px	filled buttons
controlRadius	--tk-radius-control	10px	chips, thumbnails, inputs
fontFamily	--tk-font-family	'Montserrat', system-ui, sans-serif	all modal text
overlayColor	--tk-overlay-color	rgba(0, 0, 0, 0.55)	backdrop
zIndex	--tk-z-index	2147483000	overlay stacking
logo	—	false	optional logo image URL for the header

Derived tokens — override less, stay coherent

You rarely need to set more than primary, accent, and borderRadius. Derived tokens resolve explicit-wins: a token you set is used verbatim; a derived token you omit whose base you did override is computed from your base in the browser, so the palette stays coherent:

Derived token	Base	Derivation
primaryStrong	primary	color-mix(in srgb, <primary> 80%, #000000)
panelBackground	primary	color-mix(in srgb, <primary> 20%, #ffffff)
surfaceAlt	primary	color-mix(in srgb, <primary> 6%, #ffffff)
accentHover	accent	color-mix(in srgb, <accent> 88%, #000000)
buttonRadius	borderRadius	min(<borderRadius>, 15px)
controlRadius	borderRadius	min(<borderRadius>, 10px)

Tokens you leave completely untouched keep the store defaults from the table above.

Variables are set on the overlay root element, so your page's CSS can still out-cascade them if you need surgical overrides — all modal classes are tk--prefixed.

Copy overrides

Every user-visible string in the modal has a key in copy (see CopyStrings for the full list). Pass only the keys you want to change:

copy: {
  headerTitle: 'Personalize Your Product',
  saveButton: 'Save Customization',
}

Fonts

The modal's default typeface is Montserrat, bundled with the SDK — it is never fetched from a third-party font CDN (see Security & privacy). Set fontFamily to use your storefront's own font stack instead.