Theme

The SDK ships with several named themes, each in dark and light variants.

Built-in themes

Theme	Dark	Light
Chatoshi	SsoResolvedTheme.chatoshiDark()	SsoResolvedTheme.chatoshiLight()
VIP	SsoResolvedTheme.vipDark()	SsoResolvedTheme.vipLight()
Hero	SsoResolvedTheme.heroDark()	SsoResolvedTheme.heroLight()

Set at init

await SsoSdk.initialize(SsoConfig(
  baseUrl: '...',
  origin: SsoOrigin.heroDev,
  appName: 'MyApp',
  theme: SsoResolvedTheme.vipDark(),
));

Override per screen

SsoSdk.authScreen(
  enabledProviders: [...],
  theme: SsoResolvedTheme.chatoshiLight(), // overrides the init theme
);

Theme structure

SsoResolvedTheme contains all design tokens used by SDK widgets:

Group	Class	Description
text	SsoTextColors	Primary, secondary, tertiary, disabled, etc.
brand	SsoBrandColors	Primary brand color + inverse
surface	SsoSurfaceColors	Surface / card backgrounds
background	SsoBackgroundColors	Page backgrounds
border	SsoBorderColors	Border colors
interactive	SsoInteractiveColors	Button states (default, hover, pressed)
alerts	SsoAlertColors	Success, error, warning, info
accent	SsoAccentColors	Accent / highlight colors
disabled	SsoDisabledColors	Disabled state colors
gradient	SsoGradientTokens	Gradient colors
gradients	SsoThemeGradients	Pre-built LinearGradient objects
shadow	BoxShadow	Elevation shadow

Standalone tokens

Token	Type	Constructor default
fontFamily	String	'Inter'
isDark	bool	true
radiusButton	double	8.0
radiusInput	double	8.0
radiusBlock	double	24.0
radiusButtonIcon	double	1000.0
radiusBottomSheet	double	8.0

The defaults above apply when you construct SsoResolvedTheme(...) directly. Each built-in theme overrides the button / input radius to match its visual style:

Theme	radiusButton	radiusInput
Chatoshi (dark / light)	10.0	10.0
VIP (dark / light)	8.0	8.0
Hero (dark / light)	100.0 (pill)	14.0

Radius values are consumed by SsoButton, SsoInput and related widgets, so changing them in a custom theme immediately reshapes the controls.