Embedded Modal

KryptogoKit provides a customizable theme that can be styled to match your application’s design. You can customize various aspects like accent colors, border radius, and more.

Themes

You can customize the modal UI for your brand. Pick from pre-defined accent colors and border radius configurations.

There are 2 built-in theme functions:

lightTheme() (default)
darkTheme()

The theme functions returns a theme object. You can pass the object to the KryptogoKitProvider’s theme prop.


import { KryptogoKitProvider, darkTheme } from '@kryptogo/kryptogokit-sdk-react';
 
const App = () => (
  <KryptogoKitProvider 
    theme={darkTheme()}
    {...otherProps}
  >
    {/* Your App */}
  </KryptogoKitProvider>
);

Customizing the Theme

You can customize the theme by passing options to the theme function:

Property	Type	Default	Description
`accentColor`	string	#FFC211	Primary brand color used throughout the UI
`accentColorForeground`	string	white	Text color that appears on top of accent color
`borderRadius`	none \| small \| medium \| large	large	Global border radius scale
`fontStack`	system \| rounded	rounded	Global font style
`overlayBlur`	none \| small \| large	none	Blur radius for modal overlays


import { KryptogoKitProvider, darkTheme } from '@kryptogo/kryptogokit-sdk-react';
 
const App = () => (
  <KryptogoKitProvider
    theme={darkTheme({
      accentColor: '#5F5AFA',
      accentColorForeground: darkGrey,
      borderRadius: 'small',
      fontStack: 'system',
      overlayBlur: 'small'
    })}
    {...otherProps}
  >
    {/* Your App */}
  </KryptogoKitProvider>
);

Localization

KryptogoKit supports multiple languages out of the box. By default, KryptogoKit supports the en-US locale.

If available, KryptogoKit will detect the user’s preferred language and choose the appropriate translations. You can set the language by passing the locale prop to KryptogoKitProvider:


import { KryptogoKitProvider } from '@kryptogo/kryptogokit-sdk-react';
 
const App = () => (
  <KryptogoKitProvider locale="zh-TW">
    {/* Your App */}
  </KryptogoKitProvider>
);

Currently supported languages:

en-US
zh-TW
zh-CN