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

​

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:

: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;
}

❌ 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;

​

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:

​

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