Back to Details

orderly-sdk-theming

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Orderly Network: SDK Theming

Orderly Network：SDK主题定制

Customize the look and feel of your DEX using CSS variables, the theme provider, and component overrides.
通过CSS变量、主题提供器和组件覆盖来定制你的DEX外观与交互体验。

When to Use

适用场景

  • Rebranding your DEX
  • Changing color schemes
  • Adding custom fonts
  • Styling TradingView charts
  • Creating PnL share cards
  • 为你的DEX重塑品牌
  • 更改配色方案
  • 添加自定义字体
  • 定制TradingView图表样式
  • 创建盈亏（PnL）分享卡片

Prerequisites

前置条件

  • Orderly SDK packages installed
  • Tailwind CSS configured
  • Basic CSS knowledge
  • 已安装Orderly SDK包
  • 已配置Tailwind CSS
  • 具备基础CSS知识

Overview

概述

Orderly UI uses a CSS variable-based theming system with Tailwind CSS integration:
  1. CSS Variables - Define colors, spacing, border radius
  2. Tailwind Preset - Orderly's custom Tailwind configuration
  3. OrderlyThemeProvider - Component-level overrides
  4. Assets - Logo, favicon, PnL backgrounds
Orderly UI采用基于CSS变量并集成Tailwind CSS的主题系统：
  1. CSS变量 - 定义颜色、间距、边框圆角
  2. Tailwind预设 - Orderly的自定义Tailwind配置
  3. OrderlyThemeProvider - 组件级别的覆盖配置
  4. 资源文件 - Logo、网站图标、PnL背景图

1. CSS Variables

1. CSS变量

All UI components use CSS variables prefixed with 
--oui-
. Override them in your CSS to customize the theme.
所有UI组件都使用以
--oui-
为前缀的CSS变量。在你的CSS中覆盖这些变量即可定制主题。

Create Theme File

创建主题文件

css
/* src/styles/theme.css */

:root {
  /* BRAND COLORS */
  --oui-color-primary: 99 102 241;
  --oui-color-primary-light: 165 180 252;
  --oui-color-primary-darken: 79 70 229;
  --oui-color-primary-contrast: 255 255 255;

  --oui-color-link: 99 102 241;
  --oui-color-link-light: 165 180 252;

  /* SEMANTIC COLORS */
  --oui-color-success: 34 197 94;
  --oui-color-success-light: 134 239 172;
  --oui-color-success-darken: 22 163 74;
  --oui-color-success-contrast: 255 255 255;

  --oui-color-danger: 239 68 68;
  --oui-color-danger-light: 252 165 165;
  --oui-color-danger-darken: 220 38 38;
  --oui-color-danger-contrast: 255 255 255;

  --oui-color-warning: 245 158 11;
  --oui-color-warning-light: 252 211 77;
  --oui-color-warning-darken: 217 119 6;
  --oui-color-warning-contrast: 255 255 255;

  /* TRADING COLORS */
  --oui-color-trading-profit: 34 197 94;
  --oui-color-trading-loss: 239 68 68;

  /* BACKGROUND SCALE (dark theme: 1=lightest, 10=darkest) */
  --oui-color-base-1: 100 116 139;
  --oui-color-base-2: 71 85 105;
  --oui-color-base-3: 51 65 85;
  --oui-color-base-4: 45 55 72;
  --oui-color-base-5: 39 49 66;
  --oui-color-base-6: 30 41 59;
  --oui-color-base-7: 24 33 47;
  --oui-color-base-8: 18 26 38;
  --oui-color-base-9: 15 23 42;
  --oui-color-base-10: 10 15 30;

  --oui-color-base-foreground: 255 255 255;
  --oui-color-line: 255 255 255;
  --oui-color-fill: 30 41 59;
  --oui-color-fill-active: 39 49 66;

  /* GRADIENTS */
  --oui-gradient-primary-start: 79 70 229;
  --oui-gradient-primary-end: 139 92 246;

  /* TYPOGRAPHY */
  --oui-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* BORDER RADIUS */
  --oui-rounded-sm: 2px;
  --oui-rounded: 4px;
  --oui-rounded-md: 6px;
  --oui-rounded-lg: 8px;
  --oui-rounded-xl: 12px;
  --oui-rounded-2xl: 16px;
  --oui-rounded-full: 9999px;
}
css
/* src/styles/theme.css */

:root {
  /* 品牌颜色 */
  --oui-color-primary: 99 102 241;
  --oui-color-primary-light: 165 180 252;
  --oui-color-primary-darken: 79 70 229;
  --oui-color-primary-contrast: 255 255 255;

  --oui-color-link: 99 102 241;
  --oui-color-link-light: 165 180 252;

  /* 语义化颜色 */
  --oui-color-success: 34 197 94;
  --oui-color-success-light: 134 239 172;
  --oui-color-success-darken: 22 163 74;
  --oui-color-success-contrast: 255 255 255;

  --oui-color-danger: 239 68 68;
  --oui-color-danger-light: 252 165 165;
  --oui-color-danger-darken: 220 38 38;
  --oui-color-danger-contrast: 255 255 255;

  --oui-color-warning: 245 158 11;
  --oui-color-warning-light: 252 211 77;
  --oui-color-warning-darken: 217 119 6;
  --oui-color-warning-contrast: 255 255 255;

  /* 交易相关颜色 */
  --oui-color-trading-profit: 34 197 94;
  --oui-color-trading-loss: 239 68 68;

  /* 背景色层级（深色主题：1=最浅，10=最深） */
  --oui-color-base-1: 100 116 139;
  --oui-color-base-2: 71 85 105;
  --oui-color-base-3: 51 65 85;
  --oui-color-base-4: 45 55 72;
  --oui-color-base-5: 39 49 66;
  --oui-color-base-6: 30 41 59;
  --oui-color-base-7: 24 33 47;
  --oui-color-base-8: 18 26 38;
  --oui-color-base-9: 15 23 42;
  --oui-color-base-10: 10 15 30;

  --oui-color-base-foreground: 255 255 255;
  --oui-color-line: 255 255 255;
  --oui-color-fill: 30 41 59;
  --oui-color-fill-active: 39 49 66;

  /* 渐变色 */
  --oui-gradient-primary-start: 79 70 229;
  --oui-gradient-primary-end: 139 92 246;

  /* 排版 */
  --oui-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* 边框圆角 */
  --oui-rounded-sm: 2px;
  --oui-rounded: 4px;
  --oui-rounded-md: 6px;
  --oui-rounded-lg: 8px;
  --oui-rounded-xl: 12px;
  --oui-rounded-2xl: 16px;
  --oui-rounded-full: 9999px;
}

Import Theme

导入主题

css
/* src/styles/index.css */
@import '@orderly.network/ui/dist/styles.css';
@import './theme.css';
@import './fonts.css';

@tailwind base;
@tailwind components;
@tailwind utilities;
Note: CSS variables use space-separated RGB values (e.g., 
99 102 241
) not 
rgb()
syntax. This allows Tailwind to apply opacity modifiers.
css
/* src/styles/index.css */
@import '@orderly.network/ui/dist/styles.css';
@import './theme.css';
@import './fonts.css';

@tailwind base;
@tailwind components;
@tailwind utilities;
注意：CSS变量使用空格分隔的RGB值（例如：
99 102 241
）而非
rgb()
语法。这能让Tailwind应用透明度修饰符。

2. Color Variable Reference

2. 颜色变量参考

Brand Colors

品牌颜色

VariableUsage
--oui-color-primary
Primary buttons, active states, accents
--oui-color-primary-light
Hover states, secondary highlights
--oui-color-primary-darken
Active/pressed states
--oui-color-primary-contrast
Text on primary backgrounds
--oui-color-link
Link text color
变量名用途
--oui-color-primary
主按钮、激活状态、强调元素
--oui-color-primary-light
悬停状态、次要高亮元素
--oui-color-primary-darken
激活/按下状态
--oui-color-primary-contrast
主背景色上的文字颜色
--oui-color-link
链接文字颜色

Semantic Colors

语义化颜色

VariableUsage
--oui-color-success
Profit, positive values, success messages
--oui-color-danger
Loss, negative values, errors, sell buttons
--oui-color-warning
Warnings, alerts, caution states
变量名用途
--oui-color-success
盈利、正值、成功提示
--oui-color-danger
亏损、负值、错误提示、卖出按钮
--oui-color-warning
警告、提醒、注意状态

Trading Colors

交易相关颜色

VariableUsage
--oui-color-trading-profit
Green for profits in orderbook, PnL
--oui-color-trading-loss
Red for losses in orderbook, PnL
变量名用途
--oui-color-trading-profit
订单簿、盈亏中的盈利绿色
--oui-color-trading-loss
订单簿、盈亏中的亏损红色

Background Scale

背景色层级

base-1 (lightest) → base-10 (darkest)
VariableUsage
--oui-color-base-1
to 
base-3
Muted/disabled text
--oui-color-base-4
to 
base-5
Borders, dividers
--oui-color-base-6
to 
base-7
Card/panel backgrounds
--oui-color-base-8
to 
base-9
Page backgrounds
--oui-color-base-10
Darkest background
base-1（最浅）→ base-10（最深）
变量名用途
--oui-color-base-1
至 
base-3
弱化/禁用状态的文字颜色
--oui-color-base-4
至 
base-5
边框、分隔线颜色
--oui-color-base-6
至 
base-7
卡片/面板背景色
--oui-color-base-8
至 
base-9
页面背景色
--oui-color-base-10
最深的背景色

3. Custom Fonts

3. 自定义字体

Add Custom Font

添加自定义字体

css
/* src/styles/fonts.css */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Or use local font files */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/CustomFont-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
css
/* src/styles/fonts.css */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* 或使用本地字体文件 */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/CustomFont-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

Apply Font

应用字体

css
/* In theme.css */
:root {
  --oui-font-family: 'CustomFont', 'Inter', sans-serif;
}
css
/* 在theme.css中 */
:root {
  --oui-font-family: 'CustomFont', 'Inter', sans-serif;
}

4. Logo & Assets

4. Logo与资源文件

Configure App Icons

配置应用图标

tsx
import { OrderlyAppProvider } from "@orderly.network/react-app";

<OrderlyAppProvider
  brokerId="your_broker_id"
  brokerName="Your DEX"
  networkId="mainnet"
  appIcons={{
    main: {
      img: "/logo.svg",
    },
    secondary: {
      img: "/logo-small.svg",
    },
  }}
>
tsx
import { OrderlyAppProvider } from "@orderly.network/react-app";

<OrderlyAppProvider
  brokerId="your_broker_id"
  brokerName="Your DEX"
  networkId="mainnet"
  appIcons={{
    main: {
      img: "/logo.svg",
    },
    secondary: {
      img: "/logo-small.svg",
    },
  }}
>

Favicon

网站图标（Favicon）

html
<head>
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
</head>
html
<head>
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
</head>

5. PnL Share Backgrounds

5. 盈亏（PnL）分享背景

Customize the backgrounds for the PnL sharing feature:
定制盈亏分享功能的背景：

Add Background Images

添加背景图片

public/
├── pnl/
│   ├── profit-bg-1.png
│   ├── profit-bg-2.png
│   └── loss-bg-1.png
public/
├── pnl/
│   ├── profit-bg-1.png
│   ├── profit-bg-2.png
│   └── loss-bg-1.png

Configure in TradingPage

在交易页面配置

tsx
<TradingPage
  symbol={symbol}
  sharePnLConfig={{
    backgroundImages: ['/pnl/profit-bg-1.png', '/pnl/profit-bg-2.png'],
    color: 'rgba(255, 255, 255, 0.98)',
    profitColor: 'rgb(34, 197, 94)',
    lossColor: 'rgb(239, 68, 68)',
    brandColor: 'rgb(99, 102, 241)',
  }}
/>
tsx
<TradingPage
  symbol={symbol}
  sharePnLConfig={{
    backgroundImages: ['/pnl/profit-bg-1.png', '/pnl/profit-bg-2.png'],
    color: 'rgba(255, 255, 255, 0.98)',
    profitColor: 'rgb(34, 197, 94)',
    lossColor: 'rgb(239, 68, 68)',
    brandColor: 'rgb(99, 102, 241)',
  }}
/>

6. TradingView Chart Colors

6. TradingView图表颜色

Customize the TradingView chart to match your theme:
tsx
<TradingPage
  symbol={symbol}
  tradingViewConfig={{
    scriptSRC: '/tradingview/charting_library/charting_library.js',
    library_path: '/tradingview/charting_library/',
    colorConfig: {
      chartBG: '#0f172a',
      upColor: '#22c55e',
      downColor: '#ef4444',
      pnlUpColor: '#22c55e',
      pnlDownColor: '#ef4444',
      textColor: '#e2e8f0',
    },
    overrides: {
      'paneProperties.background': '#0f172a',
      'scalesProperties.textColor': '#e2e8f0',
    },
  }}
/>
定制TradingView图表以匹配你的主题：
tsx
<TradingPage
  symbol={symbol}
  tradingViewConfig={{
    scriptSRC: '/tradingview/charting_library/charting_library.js',
    library_path: '/tradingview/charting_library/',
    colorConfig: {
      chartBG: '#0f172a',
      upColor: '#22c55e',
      downColor: '#ef4444',
      pnlUpColor: '#22c55e',
      pnlDownColor: '#ef4444',
      textColor: '#e2e8f0',
    },
    overrides: {
      'paneProperties.background': '#0f172a',
      'scalesProperties.textColor': '#e2e8f0',
    },
  }}
/>

7. Component Overrides

7. 组件覆盖

Use 
OrderlyThemeProvider
for component-level customization:
tsx
import { OrderlyThemeProvider } from '@orderly.network/ui';

<OrderlyThemeProvider
  overrides={{
    button: {
      primary: {
        className: 'custom-primary-button',
      },
    },
    input: {
      className: 'custom-input',
    },
  }}
>
  {children}
</OrderlyThemeProvider>;
使用
OrderlyThemeProvider
进行组件级别的定制：
tsx
import { OrderlyThemeProvider } from '@orderly.network/ui';

<OrderlyThemeProvider
  overrides={{
    button: {
      primary: {
        className: 'custom-primary-button',
      },
    },
    input: {
      className: 'custom-input',
    },
  }}
>
  {children}
</OrderlyThemeProvider>;

8. Tailwind Configuration

8. Tailwind配置

tailwind.config.ts

tailwind.config.ts

ts
import type { Config } from 'tailwindcss';
import { OUITailwind } from '@orderly.network/ui';

export default {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@orderly.network/**/*.{js,mjs}',
  ],
  presets: [OUITailwind.preset],
  theme: {
    extend: {
      colors: {
        brand: {
          500: '#6366f1',
          600: '#4f46e5',
        },
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [],
} satisfies Config;
ts
import type { Config } from 'tailwindcss';
import { OUITailwind } from '@orderly.network/ui';

export default {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@orderly.network/**/*.{js,mjs}',
  ],
  presets: [OUITailwind.preset],
  theme: {
    extend: {
      colors: {
        brand: {
          500: '#6366f1',
          600: '#4f46e5',
        },
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [],
} satisfies Config;

9. Complete Theme Example

9. 完整主题示例

Blue/Cyan Theme

蓝/青色调主题

css
:root {
  --oui-font-family: 'Inter', sans-serif;

  /* Brand - Cyan */
  --oui-color-primary: 6 182 212;
  --oui-color-primary-light: 103 232 249;
  --oui-color-primary-darken: 8 145 178;
  --oui-color-primary-contrast: 255 255 255;

  --oui-color-link: 34 211 238;

  /* Trading */
  --oui-color-trading-profit: 34 197 94;
  --oui-color-trading-loss: 239 68 68;

  /* Dark backgrounds */
  --oui-color-base-6: 17 24 39;
  --oui-color-base-7: 17 24 39;
  --oui-color-base-8: 10 15 25;
  --oui-color-base-9: 5 10 20;
  --oui-color-base-10: 0 5 15;

  /* Gradients */
  --oui-gradient-primary-start: 8 145 178;
  --oui-gradient-primary-end: 34 211 238;
}
css
:root {
  --oui-font-family: 'Inter', sans-serif;

  /* 品牌色 - 青色 */
  --oui-color-primary: 6 182 212;
  --oui-color-primary-light: 103 232 249;
  --oui-color-primary-darken: 8 145 178;
  --oui-color-primary-contrast: 255 255 255;

  --oui-color-link: 34 211 238;

  /* 交易相关 */
  --oui-color-trading-profit: 34 197 94;
  --oui-color-trading-loss: 239 68 68;

  /* 深色背景 */
  --oui-color-base-6: 17 24 39;
  --oui-color-base-7: 17 24 39;
  --oui-color-base-8: 10 15 25;
  --oui-color-base-9: 5 10 20;
  --oui-color-base-10: 0 5 15;

  /* 渐变色 */
  --oui-gradient-primary-start: 8 145 178;
  --oui-gradient-primary-end: 34 211 238;
}

Best Practices

最佳实践

  1. Use RGB values - CSS variables use space-separated RGB (e.g., 
    99 102 241
    )
  2. Import order matters - Import Orderly styles first, then your overrides
  3. Test all states - Verify hover, active, disabled states look correct
  4. Check accessibility - Ensure sufficient color contrast (WCAG 2.1)
  5. Test on mobile - Some components have different mobile styling
  6. Match TradingView - Keep chart colors consistent with your theme
  1. 使用RGB值 - CSS变量使用空格分隔的RGB值（例如：
    99 102 241
    ）
  2. 注意导入顺序 - 先导入Orderly样式，再导入你的覆盖样式
  3. 测试所有状态 - 验证悬停、激活、禁用状态的显示是否正确
  4. 检查可访问性 - 确保颜色对比度符合WCAG 2.1标准
  5. 移动端测试 - 部分组件在移动端有不同的样式
  6. 匹配TradingView - 保持图表颜色与主题一致

Related Skills

相关技能

  • orderly-sdk-dex-architecture - Project structure
  • orderly-sdk-install-dependency - Installing packages
  • orderly-sdk-page-components - Using pre-built components
  • orderly-sdk-dex-architecture - 项目结构
  • orderly-sdk-install-dependency - 包安装
  • orderly-sdk-page-components - 预构建组件使用