Themes

The picker should look like it belongs in your app, not like a generic widget glued on top. Pass a themeObject to TokenKitWrapper and you are set.

Using Predefined Themes

Tokenkit ships 13 themes you can use as-is:

Code

tsx

1import { themes } from 'starknet-tokenkit';

Then pass one in:

Code

tsx

1<TokenKitWrapper themeObject={themes.dark} /* ...other props */>
2  {/* Your application components */}
3</TokenKitWrapper>

Available Themes

Theme	Font	Border Radius	Description
`themes.dark`	Geist / Inter	20px	Dark background with purple accent
`themes.light`	Geist / Inter	12px	Clean white background with blue accent
`themes.blue`	Geist / Inter	16px	Blue tones throughout
`themes.gradient`	Geist / Inter	25px	Gradient backgrounds with red accent
`themes.sunset`	Geist / Inter	20px	Purple/pink gradient with warm accent
`themes.ocean`	Geist / Inter	20px	Deep blue/teal gradient
`themes.monochrome`	Geist / Inter	12px	Grayscale with white accent
`themes.emerald`	DM Sans	16px	Green gradient with nature tones
`themes.lavender`	Plus Jakarta Sans	18px	Purple gradient with soft violet accent
`themes.ember`	Outfit	14px	Warm orange/brown gradient
`themes.frost`	Sora	22px	Cool blue gradient
`themes.carbon`	Roboto	10px	Dark tech look with green accent
`themes.candy`	Nunito	24px	Pastel pink gradient

Creating a Custom Theme

If none of those fit, build your own. Just define a Theme object:

Code

tsx

1import { Theme } from 'starknet-tokenkit';
2 
3const customTheme: Theme = {
4  colors: {
5    textColor: '#f5f5f5',
6    headerFooterBg: '#2c2c2c',
7    background: '#1a1a1a',
8    primaryColor: '#646cff',
9    searchBackground: '#2c2c2c',
10    searchColor: '#f5f5f5',
11    searchBorderColor: '#444444',
12    searchFocusBorderColor: '#646cff',
13    placeholderColor: '#888888',
14  },
15  fonts: { fontFamily: "'Inter', sans-serif" },
16  borderRadius: 20,
17  height: '60dvh',
18};

And pass it in:

Code

tsx

1<TokenKitWrapper themeObject={customTheme} /* ...other props */>
2  {/* Your application components */}
3</TokenKitWrapper>

Theme Interface Reference

Code

tsx

1interface Theme {
2  colors: ThemeColors;
3  fonts: ThemeFonts;
4  borderRadius: number;  // Border radius in pixels
5  height: string;        // Default container height (e.g. "60dvh")
6}
7 
8interface ThemeColors {
9  textColor: string;             // Primary text color
10  headerFooterBg: string;       // Header and footer background
11  background: string;            // Main background (supports gradients)
12  primaryColor: string;          // Accent color for links and highlights
13  searchBackground: string;      // Search input background
14  searchColor: string;           // Search input text color
15  searchBorderColor: string;     // Search input border color
16  searchFocusBorderColor: string; // Search input focused border color
17  placeholderColor: string;      // Placeholder text and scrollbar color
18}
19 
20interface ThemeFonts {
21  fontFamily: string;  // CSS font-family string
22}

:::tip background and headerFooterBg accept CSS gradients too, not just solid colors. So linear-gradient(135deg, #1a1025, #471e3c) works fine. :::

Documentation

Themes

Using Predefined Themes

Available Themes

Creating a Custom Theme

Theme Interface Reference