Skip to main content

Themes

You can provide a theme to the WalletProvider component to customize the components in dApp Kit.

import { lightTheme, WalletProvider } from '@iota/dapp-kit';

const App = () => {
    return (
        <WalletProvider theme={lightTheme}>
            <YourApp />
        </WalletProvider>
    );
};

Dynamic themes​

To dynamically change the theme, you can provide multiple themes to the WalletProvider component:

import { lightTheme, WalletProvider } from '@iota/dapp-kit';

import { darkTheme, pinkTheme } from './my-themes';

const App = () => {
    return (
        <WalletProvider
            theme={[
                {
                    // default to light theme
                    variables: lightTheme,
                },
                {
                    // Adds theme inside a media query
                    mediaQuery: '(prefers-color-scheme: dark)',
                    variables: darkTheme,
                },
                {
                    // prefixes the theme styles with the given selector
                    // this allows controlling the theme by adding a class to the body
                    selector: '.pink-theme',
                    variables: pinkTheme,
                },
            ]}
        >
            <YourApp />
        </WalletProvider>
    );
};

Theme variables​

To define a custom theme, implement the ThemeVars interface with CSS variable values for your theme:

import { ThemeVars } from '@iota/dapp-kit';

// Light theme copied from dapp-kit
export const lightTheme: ThemeVars = {
    blurs: {
        modalOverlay: 'blur(0)',
    },
    backgroundColors: {
        primaryButton: '#F6F7F9',
        primaryButtonHover: '#F0F2F5',
        outlineButtonHover: '#F4F4F5',
        modalOverlay: 'rgba(24 36 53 / 20%)',
        modalPrimary: 'white',
        modalSecondary: '#F7F8F8',
        iconButton: 'transparent',
        iconButtonHover: '#F0F1F2',
        dropdownMenu: '#FFFFFF',
        dropdownMenuSeparator: '#F3F6F8',
        walletItemSelected: 'white',
        walletItemHover: '#3C424226',
    },
    borderColors: {
        outlineButton: '#E4E4E7',
    },
    colors: {
        primaryButton: '#373737',
        outlineButton: '#373737',
        iconButton: '#000000',
        body: '#182435',
        bodyMuted: '#767A81',
        bodyDanger: '#FF794B',
    },
    radii: {
        small: '6px',
        medium: '8px',
        large: '12px',
        xlarge: '16px',
    },
    shadows: {
        primaryButton: '0px 4px 12px rgba(0, 0, 0, 0.1)',
        walletItemSelected: '0px 2px 6px rgba(0, 0, 0, 0.05)',
    },
    fontWeights: {
        normal: '400',
        medium: '500',
        bold: '600',
    },
    fontSizes: {
        small: '14px',
        medium: '16px',
        large: '18px',
        xlarge: '20px',
    },
    typography: {
        fontFamily:
            'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
        fontStyle: 'normal',
        lineHeight: '1.3',
        letterSpacing: '1',
    },
};