Orderly Network：SDK 主题定制

通过 CSS 变量、主题提供器（Theme Provider）及组件覆盖（Component Overrides）来自定义您的 DEX 界面外观与体验。

适用场景

• 为您的 DEX 重新品牌化（Rebranding）
• 调整配色方案
• 引入自定义字体
• 定制 TradingView 图表样式
• 创建 PnL 分享卡片

前提条件

• 已安装 Orderly SDK 相关包
• Tailwind CSS 已正确配置
• 具备基础 CSS 知识

概览

Orderly UI 采用基于 CSS 变量的主题系统，并深度集成 Tailwind CSS：

1. CSS 变量 — 定义颜色、间距、边框圆角等基础样式属性
2. Tailwind Preset — Orderly 提供的自定义 Tailwind 配置
3. OrderlyThemeProvider — 支持组件级别的样式覆盖
4. 资源文件（Assets） — 包括 Logo、favicon、PnL 背景图等

1. CSS 变量

所有 UI 组件均使用以 --oui- 为前缀的 CSS 变量。您可在自己的 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；暗色主题下：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;

  /* 渐变色（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;
}

导入主题文件

/* 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 正确应用透明度修饰符（opacity modifiers）。

2. 颜色变量参考

品牌色

语义色

交易相关色

背景色阶

base-1（最浅）→ base-10（最深）

3. 自定义字体

添加自定义字体

/* 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;
}

应用字体

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

4. Logo 与资源文件

配置应用图标（App Icons）

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

Favicon

5. PnL 分享背景图

自定义 PnL 分享功能所使用的背景图：

添加背景图片

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

在 TradingPage 中配置

6. TradingView 图表颜色

自定义 TradingView 图表，使其与您的主题保持一致：

7. 组件覆盖（Component Overrides）

使用 OrderlyThemeProvider 实现组件级样式定制：

import { OrderlyThemeProvider } from '@orderly.network/ui';


  {children}
;

8. Tailwind 配置

tailwind.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. 完整主题示例

蓝/青色主题（Blue/Cyan Theme）

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

  /* 品牌色 — 青色（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;

  /* 交易相关色 */
  --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;
}

最佳实践

1. 使用 RGB 数值 — CSS 变量需采用空格分隔的 RGB 格式（如 99 102 241）
2. 导入顺序至关重要 — 先导入 Orderly 的样式，再导入您自己的覆盖样式
3. 全面测试各交互态 — 验证悬停（hover）、激活（active）、禁用（disabled）等状态下的视觉表现是否符合预期
4. 确保可访问性 — 检查颜色对比度是否满足 WCAG 2.1 标准
5. 移动端兼容性测试 — 部分组件在移动端具有独立样式逻辑
6. TradingView 风格一致性 — 图表颜色应与整体主题协调统一

关联技能

• orderly-sdk-dex-architecture — 项目结构说明
• orderly-sdk-install-dependency — 依赖包安装指南
• orderly-sdk-page-components — 预构建组件的使用方法