Customize Theme

Customize theme by changing colors, backgrounds and borders

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

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

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.