> ## Documentation Index
> Fetch the complete documentation index at: https://docs.layerswap.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme Examples

> Ready-to-use theme examples for different use cases

## 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

<Frame>
  <img src="https://mintcdn.com/layerswaplabsv0/U0W2O_WRSp2Oiia8/images/darkTheme.svg?fit=max&auto=format&n=U0W2O_WRSp2Oiia8&q=85&s=6f76f50dc920f20bb89a8cbb34fbdf85" style={{height: "auto", margin: "auto", paddingBottom: "20px", paddingTop: "20px"}} alt="Dark theme example" noZoom width="470" height="478" data-path="images/darkTheme.svg" />
</Frame>

Default dark theme example

<Accordion title="View dark theme configuration">
  ```typescript theme={null}
  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"
      }
    }
  };
  ```
</Accordion>

## Light Theme

A light theme optimized for bright backgrounds:

<Frame>
  <img src="https://mintcdn.com/layerswaplabsv0/0PiNxDqE9f5r3Vo-/images/lightTheme.svg?fit=max&auto=format&n=0PiNxDqE9f5r3Vo-&q=85&s=a50ac7d1f1f0782e0829cda241510bd3" style={{height: "auto", margin: "auto", paddingBottom: "20px", paddingTop: "20px"}} alt="Light theme example" noZoom width="470" height="478" data-path="images/lightTheme.svg" />
</Frame>

Default light theme example

<Accordion title="View light theme configuration">
  ```typescript theme={null}
  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"
      }
    }
  };
  ```
</Accordion>

## Brand Theme

## Minimalist Transparent Theme

A seamless integration with transparent background:

<Frame>
  <img src="https://mintcdn.com/layerswaplabsv0/0PiNxDqE9f5r3Vo-/images/transparentTheme.svg?fit=max&auto=format&n=0PiNxDqE9f5r3Vo-&q=85&s=bcd25116a521ee1bb6e21a695ba8b045" style={{height: "auto", margin: "auto", paddingBottom: "20px", paddingTop: "20px"}} alt="Minimalist transparent theme example" noZoom width="472" height="501" data-path="images/transparentTheme.svg" />
</Frame>

Default minimalist transparent theme example

<Accordion title="View minimalist transparent theme configuration">
  ```typescript theme={null}
  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"
      }
    }
  };
  ```
</Accordion>

## Complete Integration Example

Here's how to use these themes in your application:

```typescript theme={null}
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

<Card title="Test in Playground" icon="flask" href="https://playground.layerswap.io">
  Copy any of these themes into the playground to see how they look with real widget components before implementing.
</Card>

## Next Steps

<CardGroup cols={2}>
  <Card title="Color Customization" icon="palette" href="/integration/UI/Widget/Customization/Colors">
    Customize colors and generate color palettes
  </Card>

  <Card title="Theme Configuration" icon="gear" href="/integration/UI/Widget/Customization/ThemeConfiguration">
    Explore all configuration options
  </Card>

  <Card title="Tailwind Shades" icon="swatchbook" href="https://tailwindshades.app/">
    Generate custom color palettes from a single color
  </Card>
</CardGroup>