Theming

Theme values are configured in your dashboard and embedded in the session token. The provider applies them as CSS variables (web) or injected styles (React Native). You can also override them at runtime via the theme prop on BetaGamerProvider.

Token reference

Token	Type	Default	Description
`primaryColor`	hex string	#7c3aed	Accent colour — buttons, highlights, active indicators
`backgroundColor`	hex string	#0f0f0f	Game container background
`boardLight`	hex string	#f0d9b5	Light squares on the board
`boardDark`	hex string	#b58863	Dark squares on the board
`fontFamily`	string	Inter, sans-serif	Font applied to all SDK text

Reading the theme

import { useTheme } from '@beta-gamer/react';

function MyComponent() {
  const { primaryColor, boardLight, boardDark, backgroundColor, fontFamily } = useTheme();

  return (
    <div style={{
      background: backgroundColor,
      fontFamily,
      '--primary': primaryColor,
    } as React.CSSProperties}>
      {/* your custom UI */}
    </div>
  );
}

Runtime override

Pass a theme object to BetaGamerProvider to override specific tokens without changing your dashboard settings.

<BetaGamerProvider
  token={sessionToken}
  theme={{
    primaryColor: '#ff6b00',
    boardLight:   '#eeeed2',
    boardDark:    '#769656',
  }}
>
  {/* components see the overridden values */}
</BetaGamerProvider>

CSS variables (web)

The provider injects these CSS variables on the wrapper element, so you can reference them in your own stylesheets.

/* Available inside BetaGamerProvider's subtree */
--bg-primary-color
--bg-background-color
--bg-board-light
--bg-board-dark
--bg-font-family

Beta Gamer GaaS API — questions? support@beta-gamer.com