Theming

The Intents Swap Widget can be themed in two main ways.

Theme Object (Recommended)

The easiest way to theme the widget is by providing a theme object to the WidgetConfigProvider.

This automatically generates a full theme based on a small set of core colors.

Example

import { WidgetConfigProvider, Widget } from '@aurora-is-near/intents-swap-widget';

export default function App() {
  return (
    <WidgetConfigProvider
      config={{
        appName: 'My App',
        theme: {
          colorScheme: 'dark',
          accentColor: '#0098EA',
          backgroundColor: '#1E2337',
        },
      }}
    >
      <Widget />
    </WidgetConfigProvider>
  );
}

Properties

Property	Type	Description
colorScheme	'light' | 'dark'	Sets the overall color scheme
accentColor	string	Main accent color used for highlights, buttons, and active states
backgroundColor	string	Colors used for backgrounds, text and other secondary elements (ignored when using the bold style preset)
successColor	string	The color used for any success messages
warningColor	string	The color used for any warning messages
errorColor	string	The color used for any error messages
stylePreset	'clean' | 'bold'	Defines the way in which the colours are used to theme the widget
borderRadius	'none' | 'sm' | 'md' | 'lg'	The size of the border radii used throughout the widget
showContainer	true | false	Swap a container around the widget

Use our theme outside of widget

If you use Tailwind and want to apply the package styles for your custom app's elements you will need to add the sw class to some wrapping element within your app, for example:

<div className="sw">
  <h1 className="text-sw-gray-500">My Amazing Widget</h1>
  <Widget />
</div>

You also need to import non-bundled theme files as not all the CSS classes are prebuilt.

/* @import '@aurora-is-near/intents-swap-widget/styles.css'; */
@import '@aurora-is-near/intents-swap-widget/tailwind.css';

By default all theme variables are set to body element. You can change it by using themeParentElementSelector configuration option.

CSS Variable Overrides (Advanced)

If you want to get even more granular, you can override the widget’s CSS variables directly. This method gives you complete control over colors, typography, spacing, borders, and fonts.

Our package uses Tailwind, but your app doesn't have to. The package exposes CSS variables to control styling, with each variable and its corresponding Tailwind token using the sw- prefix to avoid conflicts with your app's theme and variables.

To adjust theme, override these CSS variables in your app's stylesheet. The full list of available variables can be found at packages/intents-swap-widget/src/theme.css

Example

@import '@aurora-is-near/intents-swap-widget/styles.css';

:root {
  /* Colors */
  --sw-gray-50: #ebedf5;
  --sw-gray-100: #b2b5c1;

  /* Spacing */
  --sw-space-xs: 2px;
  --sw-space-s: 4px;

  /* Border radius */
  --sw-radius-s: 4px;
  --sw-radius-m: 8px;

  /* Typography */
  --sw-font-sans: 'Inter', sans-serif;
  --sw-font-mono: 'JetBrains Mono', monospace;
}

Tailwind & CSS reset

If you use global CSS reset e.g.:

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

It will break widget's styles due to Tailwind layering system. If you face that issue and see no paddings, margins or other style issues in a widget please scope your CSS resetting styles with a @layer base as below:

@layer base {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
}