Orderly Network: SDK 主题定制

使用CSS变量、主题提供者和组件覆盖来自定义您的去中心化交易所的外观和风格。

何时使用

• - 重新品牌化您的DEX
• 更改配色方案
• 添加自定义字体
• 样式化TradingView图表
• 创建盈亏分享卡片

前提条件

• - 已安装Orderly SDK包
• 已配置Tailwind CSS
• 具备基本CSS知识

概述

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

1. 1. CSS变量 - 定义颜色、间距、边框半径
2. Tailwind预设 - Orderly的自定义Tailwind配置
3. OrderlyThemeProvider - 组件级别的覆盖
4. 资源 - Logo、网站图标、盈亏背景

1. CSS变量

所有UI组件使用以--oui-为前缀的CSS变量。在您的CSS中覆盖它们以自定义主题。

创建主题文件

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

导入主题

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. 颜色变量参考

品牌颜色

变量	用途
--oui-color-primary	主要按钮、激活状态、强调色
--oui-color-primary-light

悬停状态、次要高亮 | | --oui-color-primary-darken | 激活/按下状态 | | --oui-color-primary-contrast | 主要背景上的文本颜色 | | --oui-color-link | 链接文本颜色 |

语义颜色

变量	用途
--oui-color-success	盈利、正值、成功消息
--oui-color-danger

亏损、负值、错误、卖出按钮 | | --oui-color-warning | 警告、提醒、谨慎状态 |

交易颜色

变量	用途
--oui-color-trading-profit	订单簿和盈亏中的盈利绿色
--oui-color-trading-loss

订单簿和盈亏中的亏损红色 |

背景色阶

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. 自定义字体

添加自定义字体

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

应用字体

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

4. Logo与资源

配置应用图标

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

brokerId=yourbrokerid
brokerName=Your DEX
networkId=mainnet
appIcons={{
main: {
img: /logo.svg,
},
secondary: {
img: /logo-small.svg,
},
}}

网站图标

html

5. 盈亏分享背景

自定义盈亏分享功能的背景：

添加背景图片

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

在TradingPage中配置

tsx
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图表颜色

自定义TradingView图表以匹配您的主题：

tsx
symbol={symbol}
tradingViewConfig={{
scriptSRC: /tradingview/charting_library/chart