# Customize Theme

You can customize the widget's appearance by extending the default theme. The widget uses Chakra UI's theming system under the hood. 

```tsx
import { defaultTheme } from '@anyalt/widget';
import { WidgetProvider } from '@anyalt/widget';

const customTheme = {
  ...defaultTheme,
  colors: {
    brand: {
      primary: '#121212', // Main background color
      border: {
        tag: '#008080', // Tag border color
        active: '#008080', // Active state border
        bestRoute: '#008080', // Best route indicator
        secondary: '#919eab1f', // Secondary borders
        error: '#E53030', // Error state border
        primary: 'rgba(145, 158, 171, 0.12)', // Primary border color
      },
      bg: {
        primary: '#919eab1f', // Primary background
        active: '#008080', // Active state background
        hover: '#919eab1f', // Hover state background
        error: '#E530301a', // Error state background
        tag: 'transparent', // Tag background
        modal: '#0C0600', // Modal background
        cardBg: '#919eab0a', // Card background
        selectToken: 'rgba(0, 0, 0, 0.5)', // Token selector background
        skeleton: '#919eab', // Loading skeleton color
      },
      text: {
        primary: '#fff', // Primary text color
        warning: '#f9e154', // Warning text color
        error: '#E53030', // Error text color
        active: '#008080', // Active state text
        secondary: {
          0: '#ffffff', // Pure white text
          1: 'rgba(255, 255, 255, 0.80)', // High emphasis text
          2: 'rgba(255, 255, 255, 0.40)', // Medium emphasis text
          3: 'rgba(255, 255, 255, 0.08)', // Low emphasis text
          4: '#919eab', // Muted text
        },
      },
      buttons: {
        close: {
          primary: '#919eab', // Close button bg color
        },
        back: {
          primary: '#fff', // Back button bg color
        },
        accordion: {
          primary: '#fff', // Accordion button bg color
        },
        action: {
          bg: '#008080', // Action button background
          bgFaded: '#00808033', // Faded action button
          hover: '#006666', // Action button hover
          disabled: '#00808033', // Disabled action button
        },
        disabled: '#0B3E3E', // General disabled bg state
      },
      footer: {
        text: '#fff', // Footer text color
      },
    },
  },
};

// Use the custom theme in your app
const App = () => {
  return (
    <WidgetProvider theme={customTheme}>
      <AnyaltWidget
      // ... other props
      />
    </WidgetProvider>
  );
};
```

**Customize Text Colors**

```tsx
const customTheme = {
  ...defaultTheme,
  colors: {
    brand: {
      ...defaultTheme.colors.brand,
      text: {
        primary: '#ffffff', // Main text
        warning: '#f39c12', // Warnings
        error: '#e74c3c', // Errors
        secondary: {
          1: 'rgba(255, 255, 255, 0.9)', // Primary text
          2: 'rgba(255, 255, 255, 0.6)', // Secondary text
          3: 'rgba(255, 255, 255, 0.1)', // Disabled text
          4: '#95a5a6', // Muted text
        },
      },
    },
  },
};
```

Remember to maintain sufficient contrast ratios for accessibility when customizing colors.