> ## Documentation Index
> Fetch the complete documentation index at: https://orderly.network/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Theming

> How to customize the Orderly SDK visual theme including colors, typography, and component overrides.

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:

```css theme.css theme={null}
: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;
}
```

<Warning>
  CSS variables must be defined without color space function. See the [Tailwind CSS
  documentation](https://tailwindcss.com/docs/text-color#changing-the-opacity) for more information.
</Warning>

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

```css theme={null}
/* 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

```CSS theme={null}
--oui-color-primary: 182 79 255;
--oui-color-primary-light: 208 140 255;
--oui-color-primary-darken: 152 62 214;
```

<Info>
  **You can use the [Theme tool](https://sdk.orderly.network/theme) that we provide to quickly
  create your own theme!**
</Info>

### 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:

```css theme={null}
/* 
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:

```css theme={null}
.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:

```css theme={null}
#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

<img src="https://mintcdn.com/orderly/OzqpKdtQuSFdqT6W/images/sdks/react/replace-logo.webp?fit=max&auto=format&n=OzqpKdtQuSFdqT6W&q=85&s=b6c466455116b686719098e93a8a5571" alt="" width="1134" height="699" data-path="images/sdks/react/replace-logo.webp" />

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

```tsx theme={null}
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