@363045841yyt/klinechart-core 0.7.5 → 0.7.7

package/src/engine/renderers/candle.ts

@@ -3,7 +3,7 @@ import { RENDERER_PRIORITY } from '../../plugin'
 import type { KLineData } from '../../types/price'
 import { getKLineTrend, type kLineTrend } from '../../types/kLine'
 import { createAlignedKLineFromPx, createVerticalLineRect } from '../draw/pixelAlign'
-import { getColors, type PriceColors, type VolumePriceColors } from '../theme/colors'
+import { resolveThemeColors, type VolumePriceColors } from '../../tokens'
 import { getPhysicalKLineConfig } from '../chart'
 import { VolumePriceRelation } from '../../types/volumePrice'
 import { analyzeVolumePriceRelationBatch, DEFAULT_VOLUME_PRICE_CONFIG } from '../../utils/volumePrice'
@@ -52,7 +52,7 @@ export function createCandleRenderer(): RendererPlugin {
 
         draw(context: RenderContext) {
             const { ctx, pane, data, range, scrollLeft, kWidth, kGap, dpr, kLinePositions, markerManager, settings } = context
-            const colors = getColors(context.theme)
+            const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
             const klineData = data as KLineData[]
             if (!klineData.length) return
 
@@ -67,9 +67,9 @@ export function createCandleRenderer(): RendererPlugin {
                 settings,
             })
 
-            const usedWebGL = drawCandlesWithWebGL(context, prepared, colors.PRICE)
+            const usedWebGL = drawCandlesWithWebGL(context, prepared, colors.candleUpBody, colors.candleDownBody)
             if (!usedWebGL) {
-                drawCandlesWithCanvas2D(ctx, scrollLeft, prepared, colors.PRICE)
+                drawCandlesWithCanvas2D(ctx, scrollLeft, prepared, colors.candleUpBody, colors.candleDownBody)
             } else {
                 compositeWebGLToMainCanvas(ctx, context)
             }
@@ -238,29 +238,29 @@ function prepareCandles(args: {
     }
 }
 
-function drawCandlesWithCanvas2D(ctx: CanvasRenderingContext2D, scrollLeft: number, prepared: PreparedCandles, priceColors: PriceColors): void {
+function drawCandlesWithCanvas2D(ctx: CanvasRenderingContext2D, scrollLeft: number, prepared: PreparedCandles, upColor: string, downColor: string): void {
     ctx.save()
     ctx.translate(-scrollLeft, 0)
 
-    ctx.fillStyle = priceColors.UP
+    ctx.fillStyle = upColor
     for (let i = 0; i < prepared.upBodyCount; i++) {
         const off = i * 4
         ctx.fillRect(prepared.upBodyBuf[off], prepared.upBodyBuf[off + 1], prepared.upBodyBuf[off + 2], prepared.upBodyBuf[off + 3])
     }
 
-    ctx.fillStyle = priceColors.DOWN
+    ctx.fillStyle = downColor
     for (let i = 0; i < prepared.downBodyCount; i++) {
         const off = i * 4
         ctx.fillRect(prepared.downBodyBuf[off], prepared.downBodyBuf[off + 1], prepared.downBodyBuf[off + 2], prepared.downBodyBuf[off + 3])
     }
 
-    ctx.fillStyle = priceColors.UP
+    ctx.fillStyle = upColor
     for (let i = 0; i < prepared.upWickCount; i++) {
         const off = i * 4
         ctx.fillRect(prepared.upWickBuf[off], prepared.upWickBuf[off + 1], prepared.wickWidth, prepared.upWickBuf[off + 3])
     }
 
-    ctx.fillStyle = priceColors.DOWN
+    ctx.fillStyle = downColor
     for (let i = 0; i < prepared.downWickCount; i++) {
         const off = i * 4
         ctx.fillRect(prepared.downWickBuf[off], prepared.downWickBuf[off + 1], prepared.wickWidth, prepared.downWickBuf[off + 3])
@@ -269,17 +269,17 @@ function drawCandlesWithCanvas2D(ctx: CanvasRenderingContext2D, scrollLeft: numb
     ctx.restore()
 }
 
-function drawCandlesWithWebGL(context: RenderContext, prepared: PreparedCandles, priceColors: PriceColors): boolean {
+function drawCandlesWithWebGL(context: RenderContext, prepared: PreparedCandles, upColor: string, downColor: string): boolean {
     if (context.settings?.enableWebGLRendering === false) return false
     const surface = context.candleWebGLSurface
     if (!surface || !surface.isAvailable()) return false
 
     surface.clear()
 
-    const bodyUpOk = prepared.upBodyCount === 0 || surface.drawRectBuffer(prepared.upBodyBuf.subarray(0, prepared.upBodyCount * 4), prepared.upBodyCount, priceColors.UP, context.scrollLeft)
-    const bodyDownOk = prepared.downBodyCount === 0 || surface.drawRectBuffer(prepared.downBodyBuf.subarray(0, prepared.downBodyCount * 4), prepared.downBodyCount, priceColors.DOWN, context.scrollLeft)
-    const wickUpOk = prepared.upWickCount === 0 || surface.drawRectBuffer(prepared.upWickBuf.subarray(0, prepared.upWickCount * 4), prepared.upWickCount, priceColors.UP, context.scrollLeft)
-    const wickDownOk = prepared.downWickCount === 0 || surface.drawRectBuffer(prepared.downWickBuf.subarray(0, prepared.downWickCount * 4), prepared.downWickCount, priceColors.DOWN, context.scrollLeft)
+    const bodyUpOk = prepared.upBodyCount === 0 || surface.drawRectBuffer(prepared.upBodyBuf.subarray(0, prepared.upBodyCount * 4), prepared.upBodyCount, upColor, context.scrollLeft)
+    const bodyDownOk = prepared.downBodyCount === 0 || surface.drawRectBuffer(prepared.downBodyBuf.subarray(0, prepared.downBodyCount * 4), prepared.downBodyCount, downColor, context.scrollLeft)
+    const wickUpOk = prepared.upWickCount === 0 || surface.drawRectBuffer(prepared.upWickBuf.subarray(0, prepared.upWickCount * 4), prepared.upWickCount, upColor, context.scrollLeft)
+    const wickDownOk = prepared.downWickCount === 0 || surface.drawRectBuffer(prepared.downWickBuf.subarray(0, prepared.downWickCount * 4), prepared.downWickCount, downColor, context.scrollLeft)
 
     return bodyUpOk && bodyDownOk && wickUpOk && wickDownOk
 }
@@ -297,7 +297,7 @@ function drawVolumePriceMarkers(
     markerManager: MarkerManager | undefined
 ): void {
     const { ctx, range, kWidth, dpr } = context
-    const colors = getColors(context.theme)
+    const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
     if (!prepared.showVolumePriceMarkers || !markerManager || (context.zoomLevel ?? 1) < 2) {
         return
     }
@@ -312,7 +312,7 @@ function drawVolumePriceMarkers(
             const markerY = isRising ? k.alignedHighY - 15 : k.alignedLowY + 15
             const posIndex = k.i - range.start
             const markerX = context.kLineCenters[posIndex]!
-            drawVolumePriceMarker(ctx, markerX, markerY, relation, k.i, kWidth, 4, markerManager, dpr, colors.VOLUME_PRICE)
+            drawVolumePriceMarker(ctx, markerX, markerY, relation, k.i, kWidth, 4, markerManager, dpr, colors.volumePrice)
         }
     }
 
@@ -323,7 +323,7 @@ function drawVolumePriceMarkers(
             const markerY = isRising ? k.alignedHighY - 15 : k.alignedLowY + 15
             const posIndex = k.i - range.start
             const markerX = context.kLineCenters[posIndex]!
-            drawVolumePriceMarker(ctx, markerX, markerY, relation, k.i, kWidth, 4, markerManager, dpr, colors.VOLUME_PRICE)
+            drawVolumePriceMarker(ctx, markerX, markerY, relation, k.i, kWidth, 4, markerManager, dpr, colors.volumePrice)
         }
     }
 
@@ -366,19 +366,19 @@ export function drawVolumePriceMarker(
 
     switch (relation) {
         case VolumePriceRelation.RISE_WITH_VOLUME:
-            color = volumePriceColors.RISE_WITH
+            color = volumePriceColors.riseWith
             isUp = true
             break
         case VolumePriceRelation.RISE_WITHOUT_VOLUME:
-            color = volumePriceColors.RISE_WITHOUT
+            color = volumePriceColors.riseWithout
             isUp = true
             break
         case VolumePriceRelation.FALL_WITH_VOLUME:
-            color = volumePriceColors.FALL_WITH
+            color = volumePriceColors.fallWith
             isUp = false
             break
         case VolumePriceRelation.FALL_WITHOUT_VOLUME:
-            color = volumePriceColors.FALL_WITHOUT
+            color = volumePriceColors.fallWithout
             isUp = false
             break
         default:

package/src/engine/renderers/crosshair.ts

@@ -1,7 +1,7 @@
 import type { RendererPlugin, RenderContext } from '../../plugin'
 import { RENDERER_PRIORITY, GLOBAL_PANE_ID } from '../../plugin'
 import { createHorizontalLineRect, createVerticalLineRect } from '../draw/pixelAlign'
-import { getColors } from '../theme/colors'
+import { resolveThemeColors } from '../../tokens'
 
 /**
  * 创建十字线渲染器插件
@@ -27,7 +27,7 @@ export function createCrosshairRendererPlugin(options: {
 
     draw(context: RenderContext) {
       const { pane, dpr, paneWidth, overlayCtx } = context
-      const colors = getColors(context.theme)
+      const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
       const state = options.getCrosshairState()
 
       if (state.isDragging || !state.pos) return
@@ -50,7 +50,7 @@ export function createCrosshairRendererPlugin(options: {
       ctx.rect(0, 0, paneWidth, pane.height)
       ctx.clip()
 
-      ctx.fillStyle = colors.CROSSHAIR.LINE
+      ctx.fillStyle = colors.crosshairLine
 
       // 绘制垂直线
       const v = createVerticalLineRect(x, 0, pane.height, dpr)

package/src/engine/renderers/extremaMarkers.ts

@@ -2,7 +2,7 @@ import type { RendererPlugin, RenderContext } from '../../plugin'
 import { RENDERER_PRIORITY, GLOBAL_PANE_ID } from '../../plugin'
 import type { KLineData } from '../../types/price'
 import { roundToPhysicalPixel, alignToPhysicalPixelCenter, createHorizontalLineRect } from '../draw/pixelAlign'
-import { getColors, type ThemeColors } from '../theme/colors'
+import { resolveThemeColors } from '../../tokens'
 import { getFont, setCanvasFont } from '../theme/fonts'
 
 const textWidthCache = new Map<string, number>()
@@ -58,14 +58,15 @@ function drawAllMarkers(
     ctx: CanvasRenderingContext2D,
     markers: MarkerData[],
     dpr: number,
-    colors: ThemeColors
+    lineColor: string,
+    textColor: string
 ) {
     if (markers.length === 0) return
 
     ctx.save()
 
     // ========== 阶段1：批量绘制所有线条（同一 fillStyle）==========
-    ctx.fillStyle = colors.TEXT.WEAK
+    ctx.fillStyle = lineColor
     for (const m of markers) {
         const lineRect = createHorizontalLineRect(m.lineStartX, m.lineEndX, m.y, dpr)
         if (lineRect) {
@@ -84,7 +85,7 @@ function drawAllMarkers(
     // ========== 阶段3：批量绘制所有文字（同一 font/baseline/fillStyle）==========
     setCanvasFont(ctx, MARKER_FONT)
     ctx.textBaseline = 'middle'
-    ctx.fillStyle = colors.PRICE.NEUTRAL
+    ctx.fillStyle = textColor
 
     for (const m of markers) {
         ctx.textAlign = m.drawLeft ? 'right' : 'left'
@@ -108,7 +109,7 @@ export function createExtremaMarkersRendererPlugin(): RendererPlugin {
 
         draw(context: RenderContext) {
             const { ctx, pane, data, range, scrollLeft, dpr, paneWidth, kLineCenters } = context
-            const colors = getColors(context.theme)
+            const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
             const klineData = data as KLineData[]
             if (!klineData.length) return
             if (pane.role !== 'price') return
@@ -150,9 +151,9 @@ export function createExtremaMarkersRendererPlugin(): RendererPlugin {
                 price: max,
                 y: pane.yAxis.priceToY(max),
                 style: {
-                    bgColor: colors.LAST_PRICE_LABEL.BG,
-                    borderColor: colors.PRICE.LAST_PRICE,
-                    textColor: colors.PRICE.LAST_PRICE,
+                    bgColor: colors.lastPriceLabel.bg,
+                    borderColor: colors.price.lastPrice,
+                    textColor: colors.price.lastPrice,
                 }
             })
 
@@ -161,9 +162,9 @@ export function createExtremaMarkersRendererPlugin(): RendererPlugin {
                 price: min,
                 y: pane.yAxis.priceToY(min),
                 style: {
-                    bgColor: colors.LAST_PRICE_LABEL.BG,
-                    borderColor: colors.PRICE.LAST_PRICE,
-                    textColor: colors.PRICE.LAST_PRICE,
+                    bgColor: colors.lastPriceLabel.bg,
+                    borderColor: colors.price.lastPrice,
+                    textColor: colors.price.lastPrice,
                 }
             })
 
@@ -193,7 +194,7 @@ export function createExtremaMarkersRendererPlugin(): RendererPlugin {
             // 批量绘制所有 markers
             ctx.save()
             ctx.translate(-scrollLeft, 0)
-            drawAllMarkers(ctx, markers, dpr, colors)
+            drawAllMarkers(ctx, markers, dpr, colors.text.weak, colors.text.primary)
             ctx.restore()
         },
     }

package/src/engine/renderers/gridLines.ts

@@ -3,7 +3,7 @@ import { RENDERER_PRIORITY, GLOBAL_PANE_ID } from '../../plugin'
 import type { KLineData } from '../../types/price'
 import { createHorizontalLineRect, createVerticalLineRect } from '../draw/pixelAlign'
 import { findMonthBoundaries } from '../../utils/dateFormat'
-import { getColors } from '../theme/colors'
+import { resolveThemeColors } from '../../tokens'
 import { calculateTickPositions, calculateValueTickPositions, type ScaleType } from '../utils/tickPosition'
 
 /**
@@ -22,13 +22,13 @@ export function createGridLinesRendererPlugin(): RendererPlugin {
 
         draw(context: RenderContext) {
             const { ctx, pane, data, range, scrollLeft, kWidth, dpr, kLinePositions, settings } = context
-            const colors = getColors(context.theme)
+            const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
             const klineData = data as KLineData[]
             if (!klineData.length) return
             if (settings?.showGridLines === false) return
 
             ctx.save()
-            ctx.fillStyle = colors.GRID.HORIZONTAL
+            ctx.fillStyle = colors.gridMajor
             ctx.translate(-scrollLeft, 0)
 
             const plotWidth = ctx.canvas.width / dpr

package/src/engine/renderers/lastPrice.ts

@@ -1,7 +1,7 @@
 import type { RendererPlugin, RenderContext } from '../../plugin'
 import { RENDERER_PRIORITY } from '../../plugin'
 import type { KLineData } from '../../types/price'
-import { getColors } from '../theme/colors'
+import { resolveThemeColors } from '../../tokens'
 
 function getLastPriceInfo(context: RenderContext) {
     const { pane, data } = context
@@ -35,7 +35,7 @@ export function createLastPriceLabelRegistrarPlugin(): RendererPlugin {
         priority: RENDERER_PRIORITY.LAST_PRICE_LABEL,
 
         draw(context: RenderContext) {
-            const colors = getColors(context.theme)
+            const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
             const info = getLastPriceInfo(context)
             if (!info) return
 
@@ -46,9 +46,9 @@ export function createLastPriceLabelRegistrarPlugin(): RendererPlugin {
                 y: info.y,
                 type: 'lastPrice',
                 style: {
-                    bgColor: colors.LAST_PRICE_LABEL.BG,
-                    borderColor: colors.PRICE.LAST_PRICE,
-                    textColor: colors.PRICE.LAST_PRICE,
+                    bgColor: colors.lastPriceLabel.bg,
+                    borderColor: colors.price.lastPrice,
+                    textColor: colors.price.lastPrice,
                 }
             })
         },
@@ -69,7 +69,7 @@ export function createLastPriceLineRendererPlugin(): RendererPlugin {
 
         draw(context: RenderContext) {
             const { ctx, scrollLeft, dpr, kLinePositions, paneWidth } = context
-            const colors = getColors(context.theme)
+            const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
             const info = getLastPriceInfo(context)
             if (!info) return
 
@@ -81,7 +81,7 @@ export function createLastPriceLineRendererPlugin(): RendererPlugin {
             const startX = kLinePositions[0] ?? 0
             const endX = paneWidth + scrollLeft
 
-            ctx.strokeStyle = colors.PRICE.LAST_PRICE
+            ctx.strokeStyle = colors.price.lastPrice
             ctx.lineWidth = 1
             ctx.setLineDash([4, 3])
             ctx.beginPath()

package/src/engine/renderers/paneTitle.ts

@@ -1,7 +1,9 @@
-import type { RendererPlugin, RenderContext } from '../../plugin'
+import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../plugin'
 import { RENDERER_PRIORITY } from '../../plugin'
-import { getColors } from '../theme/colors'
+import { resolveThemeColors } from '../../tokens'
 import { getFont, setCanvasFont } from '../theme/fonts'
+import { SUB_PANE_INDICATOR_CONFIGS } from './Indicator/subPaneConfig'
+import type { SubIndicatorType } from './Indicator'
 
 const textWidthCache = new Map<string, number>()
 const TEXT_WIDTH_CACHE_LIMIT = 256
@@ -21,49 +23,30 @@ function measureTextWidth(ctx: CanvasRenderingContext2D, text: string): number {
     return width
 }
 
-/**
- * 单个数值项
- */
 export interface TitleValueItem {
-    /** 标签（如 "DIF"、"DEA"） */
     label: string
-    /** 数值 */
     value: number
-    /** 颜色 */
     color: string
 }
 
-/**
- * 标题信息（由指标渲染器提供）
- */
 export interface TitleInfo {
-    /** 指标名称（如 "MACD"） */
     name: string
-    /** 参数列表（如 [12, 26, 9]） */
     params?: number[]
-    /** 数值项列表 */
     values?: TitleValueItem[]
 }
 
 export interface PaneTitleOptions {
-    /** 面板 ID */
     paneId: string
-    /** 标题文本（静态模式） */
     title: string
-    /** 副标题/描述 */
     description?: string
-    /** Y 偏移（逻辑像素） */
     yOffset?: number
-    /** 动态标题信息提供函数 */
-    getTitleInfo?: () => TitleInfo | null
+    indicatorId: SubIndicatorType
+    params: Record<string, unknown>
 }
 
-/**
- * 创建面板标题渲染器插件
- * 在面板左上角显示标题，支持动态指标数值显示
- */
-export function createPaneTitleRendererPlugin(options: PaneTitleOptions): RendererPlugin {
+export function createPaneTitleRendererPlugin(options: PaneTitleOptions): RendererPluginWithHost {
     let currentOptions = { ...options }
+    let pluginHost: PluginHost | null = null
 
     return {
         name: `paneTitle_${options.paneId}`,
@@ -74,9 +57,13 @@ export function createPaneTitleRendererPlugin(options: PaneTitleOptions): Render
         priority: RENDERER_PRIORITY.FOREGROUND,
         layer: 'overlay',
 
+        onInstall(host: PluginHost) {
+            pluginHost = host
+        },
+
         draw(context: RenderContext) {
             const { overlayCtx, pane, paneWidth } = context
-            const colors = getColors(context.theme)
+            const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
             if (pane.id !== currentOptions.paneId || !overlayCtx) return
 
             const fontSize = 12
@@ -89,18 +76,22 @@ export function createPaneTitleRendererPlugin(options: PaneTitleOptions): Render
             overlayCtx.textAlign = 'left'
             overlayCtx.textBaseline = 'top'
 
-            const titleInfo = currentOptions.getTitleInfo?.()
+            const config = SUB_PANE_INDICATOR_CONFIGS[currentOptions.indicatorId]
+            const crosshairIndex = context.crosshairIndex ?? null
+            const titleInfo = config && pluginHost
+                ? config.getTitleInfo(context.data, crosshairIndex, currentOptions.params as Record<string, number | boolean | string>, pluginHost, currentOptions.paneId)
+                : null
 
             if (titleInfo) {
                 let currentX = x
 
-                overlayCtx.fillStyle = colors.TEXT.PRIMARY
+                overlayCtx.fillStyle = colors.text.primary
                 overlayCtx.fillText(titleInfo.name, currentX, y)
                 currentX += measureTextWidth(overlayCtx, titleInfo.name)
 
                 if (titleInfo.params && titleInfo.params.length > 0) {
                     const paramText = `(${titleInfo.params.join(',')})`
-                    overlayCtx.fillStyle = colors.TEXT.TERTIARY
+                    overlayCtx.fillStyle = colors.text.tertiary
                     overlayCtx.fillText(paramText, currentX, y)
                     currentX += measureTextWidth(overlayCtx, paramText) + gap
                 } else {
@@ -116,12 +107,12 @@ export function createPaneTitleRendererPlugin(options: PaneTitleOptions): Render
                     }
                 }
             } else {
-                overlayCtx.fillStyle = colors.TEXT.PRIMARY
+                overlayCtx.fillStyle = colors.text.primary
                 overlayCtx.fillText(currentOptions.title, x, y)
 
                 if (currentOptions.description) {
                     const titleWidth = measureTextWidth(overlayCtx, currentOptions.title)
-                    overlayCtx.fillStyle = colors.TEXT.WEAK
+                    overlayCtx.fillStyle = colors.text.weak
                     overlayCtx.fillText(` - ${currentOptions.description}`, x + titleWidth, y)
                 }
             }

package/src/engine/renderers/subVolume.ts

@@ -2,7 +2,7 @@ import type { RendererPluginWithHost, RenderContext, PluginHost, BaseIndicatorSt
 import { RENDERER_PRIORITY } from '../../plugin'
 import { createIndicatorStateKey } from '../../plugin/stateKeys'
 import type { KLineData } from '../../types/price'
-import { getColors, type VolumeColors } from '../theme/colors'
+import { resolveThemeColors } from '../../tokens'
 import { Indicator } from '../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../indicators/indicatorMetadata'
 import type { IndicatorScheduler } from '../indicators/scheduler'
@@ -61,7 +61,10 @@ export function createVolumeRendererPlugin(options: VolumeRendererOptions = {}):
 
         draw(context: RenderContext) {
             const { ctx, pane, data, range, dpr } = context
-            const colors = getColors(context.theme)
+            const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
+            const upVolume = colors.volumeUp
+            const downVolume = colors.volumeDown
+            const neutralVolume = colors.candleDojiBorder
             const klineData = data as KLineData[]
             if (!klineData.length) return
 
@@ -124,13 +127,13 @@ export function createVolumeRendererPlugin(options: VolumeRendererOptions = {}):
                 const finalH = rawH <= 0 ? minBarHPx : Math.max(rawH, minBarHPx)
                 const finalY = rawH <= 0 ? alignedBaseY - minBarHPx : alignedBaseY - finalH
 
-                const color = judgeColor(item, colors.VOLUME)
+                const color = judgeColor(item, upVolume, downVolume, neutralVolume)
 
                 let buf: Float32Array
                 let idx: number
-                if (color === colors.VOLUME.UP) {
+                if (color === upVolume) {
                     buf = upBuf; idx = upCount++
-                } else if (color === colors.VOLUME.DOWN) {
+                } else if (color === downVolume) {
                     buf = downBuf; idx = downCount++
                 } else {
                     buf = neutralBuf; idx = neutralCount++
@@ -142,9 +145,9 @@ export function createVolumeRendererPlugin(options: VolumeRendererOptions = {}):
                 buf[off + 3] = finalH
             }
 
-            const usedWebGL = drawVolumeWithWebGL(context, upBuf, upCount, downBuf, downCount, neutralBuf, neutralCount, colors.VOLUME)
+            const usedWebGL = drawVolumeWithWebGL(context, upBuf, upCount, downBuf, downCount, neutralBuf, neutralCount, upVolume, downVolume, neutralVolume)
             if (!usedWebGL) {
-                drawVolumeWithCanvas2D(ctx, context.scrollLeft, upBuf, upCount, downBuf, downCount, neutralBuf, neutralCount, colors.VOLUME)
+                drawVolumeWithCanvas2D(ctx, context.scrollLeft, upBuf, upCount, downBuf, downCount, neutralBuf, neutralCount, upVolume, downVolume, neutralVolume)
             } else {
                 compositeVolumeWebGL(ctx, context)
             }
@@ -157,7 +160,7 @@ function drawVolumeWithWebGL(
     upBuf: Float32Array, upCount: number,
     downBuf: Float32Array, downCount: number,
     neutralBuf: Float32Array, neutralCount: number,
-    volumeColors: VolumeColors
+    upColor: string, downColor: string, neutralColor: string
 ): boolean {
     if (context.settings?.enableWebGLRendering === false) return false
     const surface = context.candleWebGLSurface
@@ -165,9 +168,9 @@ function drawVolumeWithWebGL(
 
     surface.clear()
 
-    const ok1 = upCount === 0 || surface.drawRectBuffer(upBuf.subarray(0, upCount * 4), upCount, volumeColors.UP, context.scrollLeft)
-    const ok2 = downCount === 0 || surface.drawRectBuffer(downBuf.subarray(0, downCount * 4), downCount, volumeColors.DOWN, context.scrollLeft)
-    const ok3 = neutralCount === 0 || surface.drawRectBuffer(neutralBuf.subarray(0, neutralCount * 4), neutralCount, volumeColors.NEUTRAL, context.scrollLeft)
+    const ok1 = upCount === 0 || surface.drawRectBuffer(upBuf.subarray(0, upCount * 4), upCount, upColor, context.scrollLeft)
+    const ok2 = downCount === 0 || surface.drawRectBuffer(downBuf.subarray(0, downCount * 4), downCount, downColor, context.scrollLeft)
+    const ok3 = neutralCount === 0 || surface.drawRectBuffer(neutralBuf.subarray(0, neutralCount * 4), neutralCount, neutralColor, context.scrollLeft)
 
     return ok1 && ok2 && ok3
 }
@@ -178,24 +181,24 @@ function drawVolumeWithCanvas2D(
     upBuf: Float32Array, upCount: number,
     downBuf: Float32Array, downCount: number,
     neutralBuf: Float32Array, neutralCount: number,
-    volumeColors: VolumeColors
+    upColor: string, downColor: string, neutralColor: string
 ): void {
     ctx.save()
     ctx.translate(-scrollLeft, 0)
 
-    ctx.fillStyle = volumeColors.UP
+    ctx.fillStyle = upColor
     for (let i = 0; i < upCount; i++) {
         const off = i * 4
         ctx.fillRect(upBuf[off], upBuf[off + 1], upBuf[off + 2], upBuf[off + 3])
     }
 
-    ctx.fillStyle = volumeColors.DOWN
+    ctx.fillStyle = downColor
     for (let i = 0; i < downCount; i++) {
         const off = i * 4
         ctx.fillRect(downBuf[off], downBuf[off + 1], downBuf[off + 2], downBuf[off + 3])
     }
 
-    ctx.fillStyle = volumeColors.NEUTRAL
+    ctx.fillStyle = neutralColor
     for (let i = 0; i < neutralCount; i++) {
         const off = i * 4
         ctx.fillRect(neutralBuf[off], neutralBuf[off + 1], neutralBuf[off + 2], neutralBuf[off + 3])
@@ -212,15 +215,15 @@ function compositeVolumeWebGL(ctx: CanvasRenderingContext2D, context: RenderCont
 }
 
 /**
- * 判断成交量柱子颜色（使用 MACD 配色风格）
+ * 判断成交量柱子颜色
  */
-function judgeColor(dayData: KLineData, volumeColors: VolumeColors): string {
+function judgeColor(dayData: KLineData, upColor: string, downColor: string, neutralColor: string): string {
     if (dayData.close > dayData.open) {
-        return volumeColors.UP
+        return upColor
     } else if (dayData.close < dayData.open) {
-        return volumeColors.DOWN
+        return downColor
     } else {
-        return volumeColors.NEUTRAL
+        return neutralColor
     }
 }
 

package/src/engine/renderers/timeAxis.ts

@@ -1,4 +1,4 @@
-import { getColors } from '../theme/colors'
+import { resolveThemeColors } from '../../tokens'
 import type { RendererPlugin, RenderContext } from '../../plugin'
 import { RENDERER_PRIORITY } from '../../plugin'
 import type { KLineData } from '../../types/price'
@@ -26,7 +26,7 @@ export function createTimeAxisRendererPlugin(options: {
 
     draw(context: RenderContext) {
       const { ctx, data, range, scrollLeft, kWidth, kGap, dpr, paneWidth } = context
-      const colors = getColors(context.theme)
+      const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
       const klineData = data as KLineData[]
 
       // 时间轴绘制到传入的 ctx
@@ -52,11 +52,11 @@ export function createTimeAxisRendererPlugin(options: {
         startIndex: range.start,
         endIndex: range.end,
         dpr,
-        textColor: colors.TEXT.SECONDARY,
-        lineColor: colors.BORDER.DARK,
+        textColor: colors.text.secondary,
+        lineColor: colors.border.dark,
         drawTopBorder: false,
         drawBottomBorder: false,
-      })
+      }, context.theme, context.isAsiaMarket, context.colorPresetSettings)
 
       // 绘制来自 xAxisRanges 的时间范围带（先于标签绘制）
       if (context.xAxisRanges) {
@@ -87,9 +87,9 @@ export function createTimeAxisRendererPlugin(options: {
             timestamp: k.timestamp,
             dpr,
             fontSize: 12,
-            bgColor: colors.CROSSHAIR.LABEL_BG,
-            textColor: colors.CROSSHAIR.LABEL_TEXT,
-          })
+            bgColor: colors.crosshairLabelBg,
+            textColor: colors.crosshairLabelText,
+          }, context.theme, context.isAsiaMarket, context.colorPresetSettings)
         }
       }
 
@@ -112,7 +112,7 @@ export function createTimeAxisRendererPlugin(options: {
               fontSize: 12,
               bgColor: label.style?.bgColor,
               textColor: label.style?.textColor,
-            })
+            }, context.theme, context.isAsiaMarket, context.colorPresetSettings)
           }
         }
       }