0
# Theming
1

2
Built-in themes and customization system for styling RainbowKit components.
3

4
## Capabilities
5

6
### Built-in Themes
7

8
Pre-configured theme functions for common design preferences.
9

10
```typescript { .api }
11
/**
12
 * Light theme with customizable options
13
 * @param options - Theme customization options
14
 * @returns Light theme configuration
15
 */
16
function lightTheme(options?: ThemeOptions): ThemeVars;
17

18
/**
19
 * Dark theme with customizable options
20
 * @param options - Theme customization options
21
 * @returns Dark theme configuration
22
 */
23
function darkTheme(options?: ThemeOptions): ThemeVars;
24

25
/**
26
 * Midnight theme with customizable options
27
 * @param options - Theme customization options
28
 * @returns Midnight theme configuration
29
 */
30
function midnightTheme(options?: ThemeOptions): ThemeVars;
31

32
interface ThemeOptions {
33
  /** Primary accent color for buttons and highlights */
34
  accentColor?: string;
35
  /** Text color for accent color backgrounds */
36
  accentColorForeground?: string;
37
  /** Border radius style */
38
  borderRadius?: 'large' | 'medium' | 'small' | 'none';
39
  /** Font family style */
40
  fontStack?: 'system' | 'rounded';
41
  /** Background blur effect */
42
  overlayBlur?: 'large' | 'small' | 'none';
43
}
44
```
45

46
**Usage Examples:**
47

48
```typescript
49
import { RainbowKitProvider, lightTheme, darkTheme } from '@rainbow-me/rainbowkit';
50

51
// Basic theme usage
52
function App() {
53
  return (
54
    <RainbowKitProvider theme={lightTheme()}>
55
      {/* Your app */}
56
    </RainbowKitProvider>
57
  );
58
}
59

60
// Customized theme
61
function CustomThemedApp() {
62
  return (
63
    <RainbowKitProvider
64
      theme={lightTheme({
65
        accentColor: '#7b3cf0',
66
        accentColorForeground: 'white',
67
        borderRadius: 'small',
68
        fontStack: 'system',
69
        overlayBlur: 'small',
70
      })}
71
    >
72
      {/* Your app */}
73
    </RainbowKitProvider>
74
  );
75
}
76

77
// Responsive theming (light/dark)
78
function ResponsiveThemedApp() {
79
  return (
80
    <RainbowKitProvider
81
      theme={{
82
        lightMode: lightTheme({ accentColor: '#7b3cf0' }),
83
        darkMode: darkTheme({ accentColor: '#ff6b35' }),
84
      }}
85
    >
86
      {/* Your app */}
87
    </RainbowKitProvider>
88
  );
89
}
90
```
91

92
### Theme Conversion Functions
93

94
Functions for converting themes to different formats for custom styling integration.
95

96
```typescript { .api }
97
/**
98
 * Converts a theme to a CSS string for style injection
99
 * @param theme - Theme configuration or function
100
 * @param options - Extension options
101
 * @returns CSS string with theme variables
102
 */
103
function cssStringFromTheme(
104
  theme: ThemeVars | (() => ThemeVars),
105
  options?: { extends?: ThemeVars | (() => ThemeVars) }
106
): string;
107

108
/**
109
 * Converts a theme to a CSS object for styled-components or similar
110
 * @param theme - Theme configuration or function  
111
 * @param options - Extension options
112
 * @returns CSS object with theme variables
113
 */
114
function cssObjectFromTheme(
115
  theme: ThemeVars | (() => ThemeVars),
116
  options?: { extends?: ThemeVars | (() => ThemeVars) }
117
): Record<string, string>;
118
```
119

120
**Usage Examples:**
121

122
```typescript
123
import { lightTheme, cssStringFromTheme, cssObjectFromTheme } from '@rainbow-me/rainbowkit';
124

125
// Generate CSS string for injection
126
const theme = lightTheme({ accentColor: '#ff6b35' });
127
const cssString = cssStringFromTheme(theme);
128

129
// Inject into page
130
const styleElement = document.createElement('style');
131
styleElement.textContent = cssString;
132
document.head.appendChild(styleElement);
133

134
// Generate CSS object for styled-components
135
const cssObject = cssObjectFromTheme(theme);
136
const StyledContainer = styled.div`
137
  background: ${cssObject['--rk-colors-modalBackground']};
138
  border-radius: ${cssObject['--rk-radii-modal']};
139
`;
140
```
141

142
### Theme Variables Interface
143

144
Complete theme configuration interface for creating custom themes.
145

146
```typescript { .api }
147
interface ThemeVars {
148
  colors: {
149
    accentColor: string;
150
    accentColorForeground: string;
151
    actionButtonBorder: string;
152
    actionButtonBorderMobile: string;
153
    actionButtonSecondaryBackground: string;
154
    closeButton: string;
155
    closeButtonBackground: string;
156
    connectButtonBackground: string;
157
    connectButtonBackgroundError: string;
158
    connectButtonInnerBackground: string;
159
    connectButtonText: string;
160
    connectButtonTextError: string;
161
    connectionIndicator: string;
162
    downloadBottomCardBackground: string;
163
    downloadTopCardBackground: string;
164
    error: string;
165
    generalBorder: string;
166
    generalBorderDim: string;
167
    menuItemBackground: string;
168
    modalBackdrop: string;
169
    modalBackground: string;
170
    modalBorder: string;
171
    modalText: string;
172
    modalTextDim: string;
173
    modalTextSecondary: string;
174
    profileAction: string;
175
    profileActionHover: string;
176
    profileForeground: string;
177
    selectedOptionBorder: string;
178
    standby: string;
179
  };
180
  fonts: {
181
    body: string;
182
  };
183
  radii: {
184
    actionButton: string;
185
    connectButton: string;
186
    menuButton: string;
187
    modal: string;
188
    modalMobile: string;
189
  };
190
  shadows: {
191
    connectButton: string;
192
    dialog: string;
193
    profileDetailsAction: string;
194
    selectedOption: string;
195
    selectedWallet: string;
196
    walletLogo: string;
197
  };
198
  blurs: {
199
    modalOverlay: string;
200
  };
201
}
202
```
203

204
## Advanced Theming Patterns
205

206
### Custom Theme Creation
207

208
```typescript
209
import { Theme } from '@rainbow-me/rainbowkit';
210

211
const customTheme = (): Theme => ({
212
  colors: {
213
    accentColor: '#ff6b35',
214
    accentColorForeground: '#ffffff',
215
    actionButtonBorder: 'rgba(255, 107, 53, 0.04)',
216
    actionButtonBorderMobile: 'rgba(255, 107, 53, 0.06)',
217
    actionButtonSecondaryBackground: 'rgba(255, 107, 53, 0.04)',
218
    closeButton: '#9ca3af',
219
    closeButtonBackground: 'rgba(156, 163, 175, 0.1)',
220
    connectButtonBackground: '#ffffff',
221
    connectButtonBackgroundError: '#ff6b6b',
222
    connectButtonInnerBackground: 'linear-gradient(0deg, rgba(255, 107, 53, 0.03), rgba(255, 107, 53, 0.06))',
223
    connectButtonText: '#25292e',
224
    connectButtonTextError: '#ffffff',
225
    connectionIndicator: '#30d158',
226
    downloadBottomCardBackground: 'linear-gradient(126deg, rgba(255, 107, 53, 0.06) 9.49%, rgba(0, 0, 0, 0) 71.04%), #ffffff',
227
    downloadTopCardBackground: 'linear-gradient(126deg, rgba(171, 171, 171, 0.2) 9.49%, rgba(255, 255, 255, 0) 71.04%), #ffffff',
228
    error: '#ff6b6b',
229
    generalBorder: 'rgba(255, 107, 53, 0.06)',
230
    generalBorderDim: 'rgba(255, 107, 53, 0.03)',
231
    menuItemBackground: 'rgba(255, 107, 53, 0.04)',
232
    modalBackdrop: 'rgba(0, 0, 0, 0.3)',
233
    modalBackground: '#ffffff',
234
    modalBorder: 'rgba(255, 107, 53, 0.06)',
235
    modalText: '#25292e',
236
    modalTextDim: '#6b7280',
237
    modalTextSecondary: '#6b7280',
238
    profileAction: 'rgba(255, 107, 53, 0.04)',
239
    profileActionHover: 'rgba(255, 107, 53, 0.08)',
240
    profileForeground: 'rgba(255, 107, 53, 0.06)',
241
    selectedOptionBorder: '#ff6b35',
242
    standby: '#ffa500',
243
  },
244
  fonts: {
245
    body: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol',
246
  },
247
  radii: {
248
    actionButton: '12px',
249
    connectButton: '12px',
250
    menuButton: '12px',
251
    modal: '24px',
252
    modalMobile: '28px',
253
  },
254
  shadows: {
255
    connectButton: '0px 4px 12px rgba(255, 107, 53, 0.15)',
256
    dialog: '0px 8px 32px rgba(0, 0, 0, 0.32)',
257
    profileDetailsAction: '0px 2px 6px rgba(37, 41, 46, 0.04)',
258
    selectedOption: '0px 2px 6px rgba(255, 107, 53, 0.24)',
259
    selectedWallet: '0px 2px 6px rgba(255, 107, 53, 0.24)',
260
    walletLogo: '0px 2px 16px rgba(0, 0, 0, 0.16)',
261
  },
262
  blurs: {
263
    modalOverlay: 'blur(0px)',
264
  },
265
});
266

267
// Usage
268
function App() {
269
  return (
270
    <RainbowKitProvider theme={customTheme}>
271
      {/* Your app */}
272
    </RainbowKitProvider>
273
  );
274
}
275
```
276

277
### Theme Extension
278

279
```typescript
280
import { lightTheme, cssObjectFromTheme } from '@rainbow-me/rainbowkit';
281

282
// Extend an existing theme
283
const baseTheme = lightTheme();
284
const extendedCssObject = cssObjectFromTheme(lightTheme(), {
285
  extends: baseTheme,
286
});
287

288
// Override specific theme properties
289
const customTheme = (): Theme => ({
290
  ...lightTheme(),
291
  colors: {
292
    ...lightTheme().colors,
293
    accentColor: '#ff6b35',
294
    connectButtonBackground: '#f8f9fa',
295
  },
296
});
297
```
298

299
### Dynamic Theme Switching
300

301
```typescript
302
import { useState, useEffect } from 'react';
303
import { RainbowKitProvider, lightTheme, darkTheme } from '@rainbow-me/rainbowkit';
304

305
function ThemeProvider({ children }) {
306
  const [isDark, setIsDark] = useState(false);
307

308
  useEffect(() => {
309
    // Listen for system theme changes
310
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
311
    setIsDark(mediaQuery.matches);
312

313
    const handler = (e: MediaQueryListEvent) => setIsDark(e.matches);
314
    mediaQuery.addEventListener('change', handler);
315
    return () => mediaQuery.removeEventListener('change', handler);
316
  }, []);
317

318
  const theme = isDark 
319
    ? darkTheme({ accentColor: '#ff6b35' })
320
    : lightTheme({ accentColor: '#7b3cf0' });
321

322
  return (
323
    <RainbowKitProvider theme={theme}>
324
      {children}
325
    </RainbowKitProvider>
326
  );
327
}
328
```
329

330
### CSS-in-JS Integration
331

332
```typescript
333
import { cssObjectFromTheme, lightTheme } from '@rainbow-me/rainbowkit';
334
import styled from 'styled-components';
335

336
const theme = lightTheme({ accentColor: '#ff6b35' });
337
const cssVars = cssObjectFromTheme(theme);
338

339
const ThemedButton = styled.button`
340
  background: ${cssVars['--rk-colors-accentColor']};
341
  color: ${cssVars['--rk-colors-accentColorForeground']};
342
  border-radius: ${cssVars['--rk-radii-connectButton']};
343
  font-family: ${cssVars['--rk-fonts-body']};
344
  box-shadow: ${cssVars['--rk-shadows-connectButton']};
345
  
346
  &:hover {
347
    background: ${cssVars['--rk-colors-profileActionHover']};
348
  }
349
`;
350
```
351

352
### Theme Presets
353

354
```typescript
355
import { lightTheme, darkTheme, midnightTheme } from '@rainbow-me/rainbowkit';
356

357
// Brand color presets
358
export const themes = {
359
  bitcoin: {
360
    light: lightTheme({ accentColor: '#f7931a' }),
361
    dark: darkTheme({ accentColor: '#f7931a' }),
362
  },
363
  ethereum: {
364
    light: lightTheme({ accentColor: '#627eea' }),
365
    dark: darkTheme({ accentColor: '#627eea' }),
366
  },
367
  polygon: {
368
    light: lightTheme({ accentColor: '#8247e5' }),
369
    dark: darkTheme({ accentColor: '#8247e5' }),
370
  },
371
  arbitrum: {
372
    light: lightTheme({ accentColor: '#12aaff' }),
373
    dark: darkTheme({ accentColor: '#12aaff' }),
374
  },
375
  midnight: midnightTheme(),
376
};
377

378
// Usage with theme switching
379
function App() {
380
  const [currentTheme, setCurrentTheme] = useState('ethereum');
381
  const [isDark, setIsDark] = useState(false);
382

383
  const theme = themes[currentTheme]?.[isDark ? 'dark' : 'light'] || themes.ethereum.light;
384

385
  return (
386
    <RainbowKitProvider theme={theme}>
387
      {/* Your app with theme selector */}
388
    </RainbowKitProvider>
389
  );
390
}
391
```