Skip to Content
DocumentationThemesEmbedded Modal

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:

PropertyTypeDefaultDescription
accentColorstring#FFC211Primary brand color used throughout the UI
accentColorForegroundstringwhiteText color that appears on top of accent color
borderRadiusnone | small | medium | largelargeGlobal border radius scale
fontStacksystem | roundedroundedGlobal font style
overlayBlurnone | small | largenoneBlur 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
Last updated on