CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-rainbow-me--rainbowkit

A comprehensive React library that simplifies wallet connection functionality for decentralized applications with support for 66 wallets and extensive customization options

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

theming.mddocs/

Theming

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

Capabilities

Built-in Themes

Pre-configured theme functions for common design preferences.

/**
 * Light theme with customizable options
 * @param options - Theme customization options
 * @returns Light theme configuration
 */
function lightTheme(options?: ThemeOptions): ThemeVars;

/**
 * Dark theme with customizable options
 * @param options - Theme customization options
 * @returns Dark theme configuration
 */
function darkTheme(options?: ThemeOptions): ThemeVars;

/**
 * Midnight theme with customizable options
 * @param options - Theme customization options
 * @returns Midnight theme configuration
 */
function midnightTheme(options?: ThemeOptions): ThemeVars;

interface ThemeOptions {
  /** Primary accent color for buttons and highlights */
  accentColor?: string;
  /** Text color for accent color backgrounds */
  accentColorForeground?: string;
  /** Border radius style */
  borderRadius?: 'large' | 'medium' | 'small' | 'none';
  /** Font family style */
  fontStack?: 'system' | 'rounded';
  /** Background blur effect */
  overlayBlur?: 'large' | 'small' | 'none';
}

Usage Examples:

import { RainbowKitProvider, lightTheme, darkTheme } from '@rainbow-me/rainbowkit';

// Basic theme usage
function App() {
  return (
    <RainbowKitProvider theme={lightTheme()}>
      {/* Your app */}
    </RainbowKitProvider>
  );
}

// Customized theme
function CustomThemedApp() {
  return (
    <RainbowKitProvider
      theme={lightTheme({
        accentColor: '#7b3cf0',
        accentColorForeground: 'white',
        borderRadius: 'small',
        fontStack: 'system',
        overlayBlur: 'small',
      })}
    >
      {/* Your app */}
    </RainbowKitProvider>
  );
}

// Responsive theming (light/dark)
function ResponsiveThemedApp() {
  return (
    <RainbowKitProvider
      theme={{
        lightMode: lightTheme({ accentColor: '#7b3cf0' }),
        darkMode: darkTheme({ accentColor: '#ff6b35' }),
      }}
    >
      {/* Your app */}
    </RainbowKitProvider>
  );
}

Theme Conversion Functions

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

/**
 * Converts a theme to a CSS string for style injection
 * @param theme - Theme configuration or function
 * @param options - Extension options
 * @returns CSS string with theme variables
 */
function cssStringFromTheme(
  theme: ThemeVars | (() => ThemeVars),
  options?: { extends?: ThemeVars | (() => ThemeVars) }
): string;

/**
 * Converts a theme to a CSS object for styled-components or similar
 * @param theme - Theme configuration or function  
 * @param options - Extension options
 * @returns CSS object with theme variables
 */
function cssObjectFromTheme(
  theme: ThemeVars | (() => ThemeVars),
  options?: { extends?: ThemeVars | (() => ThemeVars) }
): Record<string, string>;

Usage Examples:

import { lightTheme, cssStringFromTheme, cssObjectFromTheme } from '@rainbow-me/rainbowkit';

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

// Inject into page
const styleElement = document.createElement('style');
styleElement.textContent = cssString;
document.head.appendChild(styleElement);

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

Theme Variables Interface

Complete theme configuration interface for creating custom themes.

interface ThemeVars {
  colors: {
    accentColor: string;
    accentColorForeground: string;
    actionButtonBorder: string;
    actionButtonBorderMobile: string;
    actionButtonSecondaryBackground: string;
    closeButton: string;
    closeButtonBackground: string;
    connectButtonBackground: string;
    connectButtonBackgroundError: string;
    connectButtonInnerBackground: string;
    connectButtonText: string;
    connectButtonTextError: string;
    connectionIndicator: string;
    downloadBottomCardBackground: string;
    downloadTopCardBackground: string;
    error: string;
    generalBorder: string;
    generalBorderDim: string;
    menuItemBackground: string;
    modalBackdrop: string;
    modalBackground: string;
    modalBorder: string;
    modalText: string;
    modalTextDim: string;
    modalTextSecondary: string;
    profileAction: string;
    profileActionHover: string;
    profileForeground: string;
    selectedOptionBorder: string;
    standby: string;
  };
  fonts: {
    body: string;
  };
  radii: {
    actionButton: string;
    connectButton: string;
    menuButton: string;
    modal: string;
    modalMobile: string;
  };
  shadows: {
    connectButton: string;
    dialog: string;
    profileDetailsAction: string;
    selectedOption: string;
    selectedWallet: string;
    walletLogo: string;
  };
  blurs: {
    modalOverlay: string;
  };
}

Advanced Theming Patterns

Custom Theme Creation

import { Theme } from '@rainbow-me/rainbowkit';

const customTheme = (): Theme => ({
  colors: {
    accentColor: '#ff6b35',
    accentColorForeground: '#ffffff',
    actionButtonBorder: 'rgba(255, 107, 53, 0.04)',
    actionButtonBorderMobile: 'rgba(255, 107, 53, 0.06)',
    actionButtonSecondaryBackground: 'rgba(255, 107, 53, 0.04)',
    closeButton: '#9ca3af',
    closeButtonBackground: 'rgba(156, 163, 175, 0.1)',
    connectButtonBackground: '#ffffff',
    connectButtonBackgroundError: '#ff6b6b',
    connectButtonInnerBackground: 'linear-gradient(0deg, rgba(255, 107, 53, 0.03), rgba(255, 107, 53, 0.06))',
    connectButtonText: '#25292e',
    connectButtonTextError: '#ffffff',
    connectionIndicator: '#30d158',
    downloadBottomCardBackground: 'linear-gradient(126deg, rgba(255, 107, 53, 0.06) 9.49%, rgba(0, 0, 0, 0) 71.04%), #ffffff',
    downloadTopCardBackground: 'linear-gradient(126deg, rgba(171, 171, 171, 0.2) 9.49%, rgba(255, 255, 255, 0) 71.04%), #ffffff',
    error: '#ff6b6b',
    generalBorder: 'rgba(255, 107, 53, 0.06)',
    generalBorderDim: 'rgba(255, 107, 53, 0.03)',
    menuItemBackground: 'rgba(255, 107, 53, 0.04)',
    modalBackdrop: 'rgba(0, 0, 0, 0.3)',
    modalBackground: '#ffffff',
    modalBorder: 'rgba(255, 107, 53, 0.06)',
    modalText: '#25292e',
    modalTextDim: '#6b7280',
    modalTextSecondary: '#6b7280',
    profileAction: 'rgba(255, 107, 53, 0.04)',
    profileActionHover: 'rgba(255, 107, 53, 0.08)',
    profileForeground: 'rgba(255, 107, 53, 0.06)',
    selectedOptionBorder: '#ff6b35',
    standby: '#ffa500',
  },
  fonts: {
    body: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol',
  },
  radii: {
    actionButton: '12px',
    connectButton: '12px',
    menuButton: '12px',
    modal: '24px',
    modalMobile: '28px',
  },
  shadows: {
    connectButton: '0px 4px 12px rgba(255, 107, 53, 0.15)',
    dialog: '0px 8px 32px rgba(0, 0, 0, 0.32)',
    profileDetailsAction: '0px 2px 6px rgba(37, 41, 46, 0.04)',
    selectedOption: '0px 2px 6px rgba(255, 107, 53, 0.24)',
    selectedWallet: '0px 2px 6px rgba(255, 107, 53, 0.24)',
    walletLogo: '0px 2px 16px rgba(0, 0, 0, 0.16)',
  },
  blurs: {
    modalOverlay: 'blur(0px)',
  },
});

// Usage
function App() {
  return (
    <RainbowKitProvider theme={customTheme}>
      {/* Your app */}
    </RainbowKitProvider>
  );
}

Theme Extension

import { lightTheme, cssObjectFromTheme } from '@rainbow-me/rainbowkit';

// Extend an existing theme
const baseTheme = lightTheme();
const extendedCssObject = cssObjectFromTheme(lightTheme(), {
  extends: baseTheme,
});

// Override specific theme properties
const customTheme = (): Theme => ({
  ...lightTheme(),
  colors: {
    ...lightTheme().colors,
    accentColor: '#ff6b35',
    connectButtonBackground: '#f8f9fa',
  },
});

Dynamic Theme Switching

import { useState, useEffect } from 'react';
import { RainbowKitProvider, lightTheme, darkTheme } from '@rainbow-me/rainbowkit';

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

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

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

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

  return (
    <RainbowKitProvider theme={theme}>
      {children}
    </RainbowKitProvider>
  );
}

CSS-in-JS Integration

import { cssObjectFromTheme, lightTheme } from '@rainbow-me/rainbowkit';
import styled from 'styled-components';

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

const ThemedButton = styled.button`
  background: ${cssVars['--rk-colors-accentColor']};
  color: ${cssVars['--rk-colors-accentColorForeground']};
  border-radius: ${cssVars['--rk-radii-connectButton']};
  font-family: ${cssVars['--rk-fonts-body']};
  box-shadow: ${cssVars['--rk-shadows-connectButton']};
  
  &:hover {
    background: ${cssVars['--rk-colors-profileActionHover']};
  }
`;

Theme Presets

import { lightTheme, darkTheme, midnightTheme } from '@rainbow-me/rainbowkit';

// Brand color presets
export const themes = {
  bitcoin: {
    light: lightTheme({ accentColor: '#f7931a' }),
    dark: darkTheme({ accentColor: '#f7931a' }),
  },
  ethereum: {
    light: lightTheme({ accentColor: '#627eea' }),
    dark: darkTheme({ accentColor: '#627eea' }),
  },
  polygon: {
    light: lightTheme({ accentColor: '#8247e5' }),
    dark: darkTheme({ accentColor: '#8247e5' }),
  },
  arbitrum: {
    light: lightTheme({ accentColor: '#12aaff' }),
    dark: darkTheme({ accentColor: '#12aaff' }),
  },
  midnight: midnightTheme(),
};

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

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

  return (
    <RainbowKitProvider theme={theme}>
      {/* Your app with theme selector */}
    </RainbowKitProvider>
  );
}

Install with Tessl CLI

npx tessl i tessl/npm-rainbow-me--rainbowkit

docs

authentication.md

configuration.md

core-components.md

index.md

modal-controls.md

theming.md

wallet-connectors.md

tile.json