跳到主要内容

主题系统

主题由三层组成:mode(明暗)、theme(皮肤)、upDown(涨跌极性)。彼此正交,可单独切换。

主题 Token

每个 mode 的色板是一份 ThemeTokens:图表底色、K 线与可选指标序列的语义色。up / down 始终按绿涨红跌书写,极性在解析时再套用。

Token用途
background图表画布背景
grid网格线
axisTick坐标轴刻度
axisText坐标轴文字
crosshair十字光标线
crosshairLabelBg十字光标标签背景
crosshairLabelText十字光标标签文字
up上涨 K 线 / 上涨语义色
down下跌 K 线 / 下跌语义色
accent强调色(选中、高亮等)
series?可选指标色:ma[]emasmmabollupper / middle / lower)、sar

传入 Partial<ThemeTokens> 时,会浅合并到当前 mode 的基础色板上。

默认皮肤

内置 preset id 为 "default"defaultTheme)。观感对齐 TradingView 风格暗色系;明暗模式画布均为透明,便于透出宿主页面背景。

TokenDarkLight
backgroundtransparenttransparent
grid#2a2e39#e0e3eb
axisTick#787B86#9598a1
axisText#D1D4DC#131722
crosshair#758696#9598a1
crosshairLabelBg#2962FF#2962FF
crosshairLabelText#FFFFFF#FFFFFF
up#26A69A#089981
down#EF5350#F23645
accent#2962FF#2962FF

明暗模式

mode"light" | "dark"。也可传入 Partial<ThemeTokens>,浅合并到当前 mode 的默认色板上——用来做明暗各自的自定义配置。

加载可运行示例…

自定义主题

ThemeDefinition 描述 light / dark 两套完整色板,registerTheme 注册后通过 theme="id" 引用;也可直接 theme={ocean}。内置 defaultneonTheme 需先注册。

加载可运行示例…

涨跌配置

upDown"green-up"(绿涨红跌)或 "red-up"(红涨绿跌)。皮肤 token 里的 up / down 始终按绿涨书写,极性在解析时交换。

加载可运行示例…