Custom Theming

Customise the LayerCover widget to match your brand

Match the LayerCover widget to your application's design system.

Preset Themes

Use one of the built-in presets:

import { CoverButton, aaveTheme, compoundTheme } from '@layercover/sdk/react';

<CoverButton signer={signer} poolId={1} theme={aaveTheme} />
<CoverButton signer={signer} poolId={1} theme={compoundTheme} />

Available Presets

Custom Theme

Create your own theme with createTheme:

import { CoverButton, createTheme } from '@layercover/sdk/react';

const myTheme = createTheme({
  backgroundColor: '#0A0F1A',
  borderRadius: 12,
  primaryColor: '#00D395',
  textColor: '#FFFFFF',
  textSecondaryColor: 'rgba(255, 255, 255, 0.7)',
  borderColor: 'rgba(255, 255, 255, 0.14)',
  buttonGradient: 'linear-gradient(135deg, #00D395 0%, #00B383 100%)',
  buttonGradientHover: 'linear-gradient(135deg, #00C78E 0%, #00A877 100%)',
  buttonTextColor: '#FFFFFF',
  inputBackgroundColor: 'rgba(255, 255, 255, 0.05)',
  inputBorderRadius: 10,
  infoBackgroundColor: 'rgba(0, 211, 149, 0.12)',
  infoBorderColor: 'rgba(0, 211, 149, 0.3)',
  accordionBackgroundColor: 'rgba(255, 255, 255, 0.04)',
  accordionExpandedBackgroundColor: 'rgba(255, 255, 255, 0.08)',
});

<CoverButton signer={signer} poolId={1} theme={myTheme} />

Theme Properties

Next Steps