Skip to main content

​
Overview

This page provides complete, production-ready theme examples that you can use as starting points for your own customization. Each example includes full color palettes, configuration options, and usage guidance.

​
Dark Theme

Dark theme example
Default dark theme example 
const config = {
  theme: {
    tertiary: "118, 128, 147",
    buttonTextColor: "228, 229, 240",
    borderRadius: "medium",
    warning: {
      Foreground: "255, 201, 74",
      Background: "47, 43, 29"
    },
    error: {
      Foreground: "255, 97, 97",
      Background: "46, 27, 27"
    },
    success: {
      Foreground: "89, 224, 125",
      Background: "14, 43, 22"
    },
    primary: {
      100: "255, 148, 176",
      200: "245, 103, 141",
      300: "235, 84, 129",
      400: "229, 64, 114",
      500: "204, 45, 93",
      600: "178, 29, 74",
      700: " 143, 23, 59",
      800: "89, 14, 37",
      900: "46, 7, 19",
      DEFAULT: "204, 45, 93",
      text: "225, 227, 230"
    },
    secondary: {
      100: "60, 72, 97",
      200: "52, 63, 87",
      300: "40, 50, 71",
      400: "31, 40, 61",
      500: "23, 31, 49",
      600: "18, 25, 41",
      700: "14, 21, 36",
      800: "11, 17, 31",
      900: "7, 12, 23",
      DEFAULT: "17, 29, 54",
      text: "163, 173, 194"
    }
  }
};

​
Light Theme

A light theme optimized for bright backgrounds:
Light theme example
Default light theme example 
const config = {
  theme: {
    tertiary: "86, 97, 123",
    buttonTextColor: "17, 17, 17",
    borderRadius: "medium",
    warning: {
      Foreground: "200, 130, 0",
      Background: "255, 250, 230"
    },
    error: {
      Foreground: "220, 50, 50",
      Background: "255, 240, 240"
    },
    success: {
      Foreground: "40, 180, 80",
      Background: "235, 255, 240"
    },
    primary: {
      100: "255, 240, 248",
      200: "252, 210, 230",
      300: "247, 173, 210",
      400: "239, 131, 178",
      500: "228, 37, 117",
      600: "195, 30, 95",
      700: "156, 24, 76",
      800: "117, 18, 57",
      900: "78, 12, 38",
      DEFAULT: "228, 37, 117",
      text: "10, 10, 10"
    },
    secondary: {
      100: "255, 255, 255",
      200: "245, 247, 252",
      300: "235, 238, 245",
      400: "223, 227, 238",
      500: "210, 215, 230",
      600: "190, 196, 214",
      700: "168, 176, 199",
      800: "140, 150, 175",
      900: "110, 121, 150",
      DEFAULT: "240, 243, 248",
      text: "40, 50, 70"
    }
  }
};

​
Brand Theme

​
Minimalist Transparent Theme

A seamless integration with transparent background:
Minimalist transparent theme example
Default minimalist transparent theme example 
const config = {
  theme: {
    tertiary: "182, 182, 182",
    buttonTextColor: "19, 19, 19",
    cardBackgroundStyle: {
      backgroundColor: "transparent"
    },
    header: {
      hideMenu: true,
      hideTabs: true,
      hideWallets: true
    },
    primary: {
      100: "255, 255, 255",
      200: "255, 255, 255",
      300: "255, 255, 255",
      400: "255, 255, 255",
      500: "243, 243, 243",
      600: "215, 215, 215",
      700: "187, 187, 187",
      800: "159, 159, 159",
      900: "131, 131, 131",
      DEFAULT: "243, 243, 243",
      text: "243, 243, 243"
    },
    secondary: {
      100: "119, 119, 119",
      200: "98, 98, 98",
      300: "78, 78, 78",
      400: "57, 57, 57",
      500: "37, 37, 37",
      600: "13, 13, 13",
      700: "13, 13, 13",
      800: "13, 13, 13",
      900: "0, 0, 0",
      DEFAULT: "37, 37, 37",
      text: "182, 182, 182"
    }
  }
};

​
Complete Integration Example

Here’s how to use these themes in your application: 
import { LayerswapProvider, Swap } from '@layerswap/widget';
import { createEVMProvider } from '@layerswap/wallet-evm';
import { darkTheme } from './themes/darkTheme'; // Import your chosen theme

export default function App() {
  return (
    <LayerswapProvider
      config={{
        apiKey: 'YOUR_API_KEY',
        version: 'mainnet',
        theme: darkTheme, // Apply the theme
        initialValues: {
          defaultTab: 'swap',
          to: 'ARBITRUM_MAINNET',
          toAsset: 'USDC',
          destAddress: '0x1234567890abcdef1234567890abcdef12345678'
        }
      }}
      walletProviders={[createEVMProvider()]}
    >
      <Swap />
    </LayerswapProvider>
  );
}

​
Testing Your Theme

Test in Playground

Copy any of these themes into the playground to see how they look with real widget components before implementing.

​
Next Steps

Color Customization

Customize colors and generate color palettes

Theme Configuration

Explore all configuration options

Tailwind Shades

Generate custom color palettes from a single color