Customization

There are multiple ways to customize Metaport.

Font sizes

If you need to override the font-size property, be sure to use class names.

Theming

You can easily modify Metaport color scheme by providing a theme:

// option 1: during the init
const metaport = new Metaport({
    ...
    theme: {
        primary: '#00d4ff', // primary accent color for action buttons
        background: '#0a2540', // background color
        mode: 'dark' // theme type - dark or light
    }
});

// option 2: on the fly (e.g. when user switches theme on your dApp):
metaport.setTheme({
    primary: '#e41c5d',
    background: '#ffffff',
    mode: 'light'
});

By default, SKALE dark theme will be used. You can also set {mode: 'light'} without any additional params to use default SKALE light theme.

Position

By default, Metaport widget is located in the bottom right corner of the screen, with 20pt margin. You can customize widget position by providing position to the theme object:

import { Metaport, interfaces, dataclasses } from '@skalenetwork/metaport';

const theme: interfaces.MetaportTheme = {
    mode: 'dark',
    position: dataclasses.Positions.topLeft
}

You can use of four predefined values: topLeft, topRight, bottomRight, bottomLeft or provide your custom values in the following format:

import { dataclasses } from '@skalenetwork/metaport';
const customPosition: dataclasses.Position = {
    top: '50pt',
    bottom: 'auto',
    left: '70pt',
    right: 'auto'
}
const theme: interfaces.MetaportTheme = {
    mode: 'dark',
    position: customPosition
}

zIndex

By default, Metaport widget has base z-index equal to 99000, though it can be configured in the Metaport theme:

import { Metaport, interfaces } from '@skalenetwork/metaport';

const theme: interfaces.MetaportTheme = {
    mode: 'dark',
    zIndex: 2007 // custom zIndex
}

MUI components will be arranged using the following formula: BASE_Z_INDEX + i * Z_INDEX_STEP, where Z_INDEX_STEP = 50. See MUI zIndex reference here: https://mui.com/material-ui/customization/default-theme/?expand-path=$.zIndex.

Edit on Github