Customization

Search…
Customization
Customize the look and feel of the widget to match the design of your web app.
LI.FI Widget supports visual customization, allowing you to match your web app's design. The widget's layout stays consistent, but you can modify colors, fonts, border radius, container styles, and more.
Start customizing the widget by tweaking some of the following options:
interface WidgetConfigBase {
  // ...
  // modifies the style of the container element
  containerStyle?: CSSProperties;
  // provides colors, fonts, border-radius
  theme?: ThemeConfig;
  // sets default appearance - light, dark, or auto
  appearance?: Appearance;
  // disables UI for changing the appearance
  disableAppearance?: boolean;
}
Check out our LI.FI Playground to play with customization options in real-time.
Container style
Container style can be changed by using the corresponding containerStyle option. In the example below, we adjust border and border-radius properties.
import { LiFiWidget, WidgetConfig } from '@lifi/widget';
import { useMemo } from 'react';
​
export const WidgetPage = () => {
  const widgetConfig: WidgetConfig = useMemo(() => ({
      containerStyle: {
        border: `1px solid ${
          window.matchMedia('(prefers-color-scheme: dark)').matches
            ? 'rgb(66, 66, 66)'
            : 'rgb(234, 234, 234)'
        }`,
        borderRadius: '16px',
        display: 'flex',
      },
    }), []);
​
  return <LiFiWidget config={widgetConfig} />;
};
Before
After
Theme
Let's move further and modify the inner elements' primary and secondary colors, font family, and border radius.
import { LiFiWidget, WidgetConfig } from '@lifi/widget';
import { useMemo } from 'react';
​
export const WidgetPage = () => {
  const widgetConfig: WidgetConfig = useMemo(() => ({
      containerStyle: {
        border: `1px solid ${
          window.matchMedia('(prefers-color-scheme: dark)').matches
            ? 'rgb(66, 66, 66)'
            : 'rgb(234, 234, 234)'
        }`,
        borderRadius: '16px',
        display: 'flex',
      },
      theme: {
        palette: {
          primary: { main: '#9900d1' },
          secondary: { main: '#F5B5FF' },
        },
        shape: {
          borderRadius: 0,
          borderRadiusSecondary: 0,
        },
        typography: {
          fontFamily: 'Comic Sans MS',
        },
      },
    }), []);
​
  return <LiFiWidget config={widgetConfig} />;
};
Before
After
Appearance
The widget has complete Dark Mode support out of the box. By default, the appearance option is set to auto, which will match user system settings for dark and light mode. There is also an option to disable UI for manually switching appearance, for example, if your web app only needs dark mode.
Now let's set the default appearance to dark and disable the appearance settings UI.
import { LiFiWidget, WidgetConfig } from '@lifi/widget';
import { useMemo } from 'react';
​
export const WidgetPage = () => {
  const widgetConfig: WidgetConfig = useMemo(() => ({
      containerStyle: {
        border: `1px solid ${
          window.matchMedia('(prefers-color-scheme: dark)').matches
            ? 'rgb(66, 66, 66)'
            : 'rgb(234, 234, 234)'
        }`,
        borderRadius: '16px',
        display: 'flex',
      },
      theme: {
        palette: {
          primary: { main: '#9900d1' },
          secondary: { main: '#F5B5FF' },
        },
        shape: {
          borderRadius: 0,
          borderRadiusSecondary: 0,
        },
        typography: {
          fontFamily: 'Comic Sans MS',
        },
      },
      appearance: 'dark',
      disableAppearance: true,
    }), []);
​
  return <LiFiWidget config={widgetConfig} />;
};
Before
After
Before
After
If you are interested in additional customization options for your service, reach out via our Discord Channel.
As you can see, widget customization is pretty straightforward. We are eager to see what combinations you will come up with while we continue constantly adding new customization options.
Drawer Mode
Wallet Management
Last modified 6d ago
Copy link
Outline
Container style
Theme
Appearance