Themes
The components in dApp kit can be customized by using by providing a theme to the WalletProvider
component.
import { lightTheme, WalletProvider } from '@mysten/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 '@mysten/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, you will need to implement the ThemeVars interface with CSS variable
values for your theme:
import { ThemeVars } from '@mysten/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',
},
};