Theming

The Orderly SDK has a default theme, but you can also customize the theme yourself.

Default theme

Colors

The Components SDK uses the following colors:

Besides base, each color theme contains 3 colors:
- default: The default shade of the color
- light: A lighter shade than default
- darken: A darker shade than default
- contrastText: Text color, intended to contrast with default
base-contrast defines color of texts. The library uses transparency to differentiate the importance of texts.

Typography

The Components SDK uses Manrope as the default font.

Rounded

name	size
default	6px
sm	4px
lg	8px
full	9999px

Customized theme

CSS Variables

You can change the color of elements through creating a theme.css under the project. Simply add the following into the file, and import it for it to take effect:

theme.css

:root {
  /**
  It is often used for the color of main elements, such as background color
  */
  --oui-color-base-100: 93 83 123;
  --oui-color-base-200: 81 72 107;
  --oui-color-base-300: 68 61 89;
  --oui-color-base-400: 57 52 74;
  --oui-color-base-500: 51 46 66;
  --oui-color-base-600: 43 38 56;
  --oui-color-base-700: 36 32 47;
  --oui-color-base-800: 29 26 38;
  --oui-color-base-900: 22 20 28;

  /**
  primary color, used for buttons, border etc
  */
  --oui-color-primary: 182 79 255;
  --oui-color-primary-light: 208 140 255;
  --oui-color-primary-darken: 152 62 214;

  /**
  link color
  */
  --oui-color-link: 182 79 255;


  --oui-color-secondary: 255 255 255;
  --oui-color-tertiary: 218 218 218;
  --oui-color-quaternary: 218 218 218;

  /**
  error color or destructive action elements
  */
  --oui-color-danger: 232 88 175;
  --oui-color-danger-light: 255 103 191;
  --oui-color-danger-darken: 199 68 146;

  /**
  success color or constructive action elements
  */
  */
  --oui-color-success: 3 152 134;
  --oui-color-success-light: 0 181 159;
  --oui-color-success-darken: 0 119 105;

  /**
  warning color
  */
  --oui-color-warning: 255 207 115;
  --oui-color-warning-light: 229 199 0;
  --oui-color-warning-darken: 229 199 0;

  --oui-color-background: 27 32 40;
  --oui-color-background-contrast: 255 255 255;

  --oui-color-fill: 36 32 47;
  --oui-color-fill-light: 40 46 58;

  --oui-color-popover: 43 38 56;
  --oui-color-popover-foreground: 255 255 255;


  --oui-color-base-foreground: 255 255 255;

  --oui-color-trading-loss: 255 103 194;
  --oui-color-trading-loss-contrast: 40 46 58;
  --oui-color-trading-profit: 0 181 159;
  --oui-color-trading-profit-contrast: 40 46 58;

  /* rounded */
  --oui-rounded: 6px;
  --oui-rounded-sm: 4px;
  --oui-rounded-lg: 8px;
  --oui-rounded-full: 9999px;

  --oui-button-shadow: none;

  --oui-font-size-base: 16px;

  --oui-color-divider: 42 46 52;

  --oui-font-family: 'Manrope', sans-serif;
}

CSS variables must be defined without color space function. See the Tailwind CSS documentation for more information.

Don’t include the color space function or opacity modifiers won’t work

/* Using modern `rgb` */
--oui-color-primary: rgb(182 79 255);
--oui-color-primary-light: rgb(208 140 255);
--oui-color-primary-darken: rgb(152 62 214);

Define your CSS variables as channels with no color space function

--oui-color-primary: 182 79 255;
--oui-color-primary-light: 208 140 255;
--oui-color-primary-darken: 152 62 214;

You can use the Theme tool that we provide to quickly create your own theme!

Style override

The Components SDK provides the following two ways to override the style of components:

class

To override the style of a certain class. For example, if we want to modify the style of a button component, we can achieve this by selecting the element using the class selector. For instance, to change the color of the button component:

/* 
general buttons
*/
.oui-button {
  background-color: #000;
  color: #fff;
}
/* 
primary buttons
*/
.oui-button-primary {
  background-color: #000;
  color: #fff;
}

If you want to change the disabled status of the button component:

.oui-button-disabled {
  background-color: rgba(0, 0, 0, 0.3);
  color: #999;
}

id

If you want to modify the style of a specific component, you can use the id selector to define the component’s style. For example, if you want to modify the style of the “Create Order” button:

#orderly-order-entry-confirm-button {
  background-color: #000;
  color: #fff;
}

Supported ids are as below:

id	module	description
orderly-deposit-confirm-button	deposit	Deposit confirm button
orderly-withdraw-confirm-button	withdraw	Withdraw confirm button
orderly-assets-margin-deposit-button	assets	Deposit button
orderly-assets-margin-withdraw-button	assets	Withdraw button
orderly-order-entry-confirm-button	order	Order entry - confirm button
orderly-position-cell-limit-close-button	positions	Position - limit close button
orderly-position-cell-mark-close-button	positions	Position - market close button
orderly-pending-cell-edit-button	pending orders	Edit pending order button
orderly-pending-cell-cancel-button	pending orders	Cancel pending order button
orderly-bottom-nav-bar-connect-button	bottom-nav-bar	bottom bar connect wallet button

appIcons

You can add your logo to the indicated position in the diagram above using the following method:

import { TradingPage, OrderlyAppProvider } from "@orderly.network/react";

export default function Trading() {
  return (
    <OrderlyAppProvider
      networkId="testnet"
      brokerId="<Your broker id>"
      appIcons={{
        main: {
          img: "<main logo src>"
        },
        secondary: {
          img: "<secondary log src>"
        }
      }}
    >
      {/* Page Component */}
    </OrderlyAppProvider>
  );
}

main

The logo for the desktop version, it will be displayed in the top left corner of the page.

img

Type: string
Required: false

component

Type: ReactNode
Required: false

className

Type: string
Required: false

secondary

The logo for the mobile web version, it will be displayed in the top right corner of the page and in the top left corner of the bottomSheet component.

img

Type: string
Required: false

component

Type: ReactNode
Required: false

className

Type: string
Required: false

Software development kits

[evm] react components SDK

[evm] react hooks SDK

[evm] core SDK

[evm] perp SDK

Autogenerated technical reference

Default theme

Colors

Typography

Rounded

Customized theme

CSS Variables

Style override

class

id

appIcons

main

img

component

className

secondary

img

component

className

​Default theme

​Colors

​Typography

​Rounded

​Customized theme

​CSS Variables

​Style override

​class

​id

​appIcons

​main

​img

​component

​className

​secondary

​img

​component

​className

Default theme

Colors

Typography

Rounded

Customized theme

CSS Variables

Style override

class

id

appIcons

main

img

component

className

secondary

img

component

className