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