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

namesize
default6px
sm4px
lg8px
full9999px

​
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:
idmoduledescription
orderly-deposit-confirm-buttondepositDeposit confirm button
orderly-withdraw-confirm-buttonwithdrawWithdraw confirm button
orderly-assets-margin-deposit-buttonassetsDeposit button
orderly-assets-margin-withdraw-buttonassetsWithdraw button
orderly-order-entry-confirm-buttonorderOrder entry - confirm button
orderly-position-cell-limit-close-buttonpositionsPosition - limit close button
orderly-position-cell-mark-close-buttonpositionsPosition - market close button
orderly-pending-cell-edit-buttonpending ordersEdit pending order button
orderly-pending-cell-cancel-buttonpending ordersCancel pending order button
orderly-bottom-nav-bar-connect-buttonbottom-nav-barbottom 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