Theme Reference

theme styles the plugin to match the website. Every key is optional; anything you leave out uses the brand’s default look. Only the keys below are accepted: an unknown key or a bad value stops the plugin from loading and says which one (Errors & Validation).

theme: {
  mode: 'dark',
  primary: '#1C7ED6',
  headerBackground: '#0B4F8A',
  headerText: '#FFFFFF',
  fontFamily: 'Open Sans',
  corners: 'small',
}

Mode

Key	Values	Default	What it does
`mode`	`"auto"` \| `"light"` \| `"dark"`	`"auto"`	`auto` follows the visitor’s device setting. Colours you set apply in both modes.

Colours

Every colour is a 6-digit hex code: #RRGGBB, like #F2B400. Shorthand (#FB0), names (red) and rgb() aren’t accepted.

Page and Header

Key	What it colours
`background`	The whole plugin’s background
`text`	Main text
`primary`	The accent: buttons, active tabs, highlights
`border`	Lines and dividers
`headerBackground`	The top band with the logo, title and tabs
`headerText`	Text in that band

Parts (Optional)

Unset, each follows from the colours above.

Key	What it colours
`contentBackground`	Behind lists, tables and filters under the tabs (unset: a shade of `background`)
`buttonBackground`	Primary buttons
`secondaryButtonBackground`	Secondary buttons
`secondaryButtonBorder`	Secondary button borders
`outlineButtonColor`	Outline buttons (text and border)
`linkColor`	Links in text, tables and breadcrumbs
`inputBackground`	Search boxes, selects and form fields
`inputBorder`	Their borders
`scheduleHeaderBackground`	Schedule day headers
`scheduleBodyBackground`	Schedule game rows and cards
`bracketBackground`	Behind the playoffs bracket

Presets

The SportNinja builder offers colour presets. In code there’s no preset name: a preset is just these three colours.

Preset	`headerBackground`	`headerText`	`primary`
Ocean	`#0B4F8A`	`#FFFFFF`	`#1C7ED6`
Forest	`#1E5E3B`	`#FFFFFF`	`#2F9E5B`
Crimson	`#8E1B2C`	`#FFFFFF`	`#D6334A`
Sunset	`#F59F00`	`#1A1A1A`	`#E8590C`
Royal	`#4C2A85`	`#FFFFFF`	`#7950F2`

Typography

Key	Values	Default	What it does
`fontFamily`	a Google Fonts family name	brand font	Body text: paragraphs, labels, tables, buttons
`headingFontFamily`	a Google Fonts family name	brand font	Titles, tabs and other uppercase display text
`fontSize`	whole number, `14`–`22`	`16`	The base text size in px; all other text sizes scale from it
`letterSpacing`	`-2` to `5`, in steps of `0.1`	`0`	Body text tracking in px, added to each style’s own
`headingLetterSpacing`	`-2` to `5`, in steps of `0.1`	the font’s own	Heading tracking in px; replaces the default

Font names are typed exactly as Google Fonts lists them: "Open Sans", "Roboto Condensed". They start with a letter, use letters, digits and spaces only, and are at most 50 characters. CSS values ("Open Sans", sans-serif) aren’t accepted. The plugin loads the font from Google Fonts itself.

Shape and Spacing

Key	Values	Default	What it does
`corners`	`"rounded"` \| `"small"` \| `"square"`	brand default	Corner radius of cards, buttons and fields
`spacing`	`"default"` \| `"compact"` \| a number `2`–`8` in steps of `0.5`	`"default"`	The spacing unit in px that all gaps and padding are built from. `"default"` is 4, `"compact"` is 3.

Game Page

Key	Values	Default	What it does
`scoreboard`	`"photo"` \| `"header"`	`"photo"`	The game scoreboard’s background: the sport photo, or your header colours

Changing the Theme Live

Send a new theme without reloading the page, e.g. to follow your site’s own dark-mode switch:

SportNinja.push(['update', { theme: { mode: 'dark', primary: '#1C7ED6' } }]);

update replaces the whole theme section: send every key you want to keep. See JavaScript API.