Theming

Futures uses the same shared GameTheme as every other SDK game — there’s no Futures-specific theme type. All properties are optional; only override what you need.

Theme Prop


import { FuturesGameSDK, type GameTheme } from '@maktubbet/sdk/futures'
 
const theme: GameTheme = {
  backgroundDark: '#0D1117',
  backgroundDarkLight: '#161B22',
  buttonColor: '#10b981',
  borderRadius: '8px',
}
 
<FuturesGameSDK theme={theme} />

Properties

Property	CSS Variable	Description
`backgroundDark`	`--maktub-bg-dark`	Main background color
`backgroundDarkLight`	`--maktub-bg-dark-light`	Secondary background — panels, chart canvas
`lightBackground`	`--maktub-light-bg`	Lighter surface background
`inputBackground`	`--maktub-input-bg`	Background for input fields (e.g. the position amount input)
`buttonColor`	`--maktub-button-color`	Primary accent — drives the main action button (open/close position), and is used to derive the chart line color
`modeSelectBackground`	`--maktub-mode-select-bg`	Background of the long/short (mode) selector
`modeSelectActiveColor`	`--maktub-mode-select-active`	Active state color of the long/short selector
`actionButtonColor`	`--maktub-action-btn-bg`	Background color for secondary action buttons
`borderRadius`	`--maktub-border-radius`	Global border radius for cards, buttons, and modals

None of these have hardcoded defaults baked into the docs — the SDK falls back to its own internal dark palette when a field is omitted. Only pass the fields you want to override.

How It Works

FuturesGameSDK builds a React.CSSProperties object from your theme prop and applies it as CSS custom properties on the component’s root element (.maktub-sdk-root). The same buildThemeVars / applyThemeToRoot helpers used by Dice, Mines, Crash, and every other SDK game power this — so a theme that works for one game works the same way for Futures.

Changes are instant — no re-render needed
buttonColor also derives a readable button text color and other computed accents automatically (e.g. picking white or dark text depending on how light buttonColor is)

Examples

Dark Neutral


const theme: GameTheme = {
  backgroundDark: '#0A0A0A',
  backgroundDarkLight: '#111111',
  buttonColor: '#22c55e',
  borderRadius: '4px',
}

Midnight Blue


const theme: GameTheme = {
  backgroundDark: '#0D1117',
  backgroundDarkLight: '#161B22',
  buttonColor: '#06b6d4',
  borderRadius: '8px',
}

Rounded / Soft


const theme: GameTheme = {
  backgroundDark: '#1a1025',
  backgroundDarkLight: '#221530',
  buttonColor: '#a855f7',
  borderRadius: '2em',
}

No Radius


const theme: GameTheme = {
  borderRadius: '0px',
}

Accent Color Usage

buttonColor is the primary accent and shows up throughout the UI:

Chart line — the price line color
Open/close position button — button background color
Active states — active tab / selector tints

Logo

The logo prop accepts any ReactNode. If omitted, a muted placeholder is shown.


<FuturesGameSDK
  logo={<img src="/logo.svg" alt="Brand" width={120} />}
/>

Next Steps

API Reference →