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:
: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;
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;
}
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 id
s 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
Responses are generated using AI and may contain mistakes.