@363045841yyt/klinechart-core 0.7.6 → 0.7.8

package/src/engine/renderers/Indicator/rsi.ts

@@ -1,6 +1,6 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
-import { getColors, type ThemeColors, type ChartTheme } from '../../theme/colors'
+import { resolveThemeColors } from '../../../tokens'
 import { alignToPhysicalPixelCenter } from '../../draw/pixelAlign'
 import type { RSIRenderState } from '../../indicators/rsiState'
 import { createRSIStateKey } from '../../indicators/rsiState'
@@ -168,7 +168,7 @@ export function createRSIRendererPlugin(options: RSIRendererOptions = {}): Rende
 
         draw(context: RenderContext) {
 const { ctx, pane, range, scrollLeft, dpr, kLineCenters, lineWebGLSurface } = context
-            const colors = getColors(context.theme)
+            const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
 
             // 从 StateStore 读取 RSI 状态
             const stateKey = resolveKey()
@@ -191,6 +191,10 @@ const { ctx, pane, range, scrollLeft, dpr, kLineCenters, lineWebGLSurface } = co
             // ========== 优化1: 使用离屏 Canvas 缓存虚线背景线 ==========
             const paneWidth = context.paneWidth
             const paneHeight = pane.height
+            if (paneWidth <= 0 || paneHeight <= 0) {
+                clearLineCache()
+                return
+            }
             const dashedLinesKey = buildDashedLinesKey(paneWidth, paneHeight, displayMin, displayMax, dpr)
 
             if (cachedDashedLinesKey !== dashedLinesKey) {
@@ -251,13 +255,13 @@ const { ctx, pane, range, scrollLeft, dpr, kLineCenters, lineWebGLSurface } = co
             if (enableWebGL && lineWebGLSurface?.isAvailable()) {
                 const lines: Array<{ points: LinePoint[]; width: number; color: string }> = []
                 if (params.showRSI1 && cachedRSI1Points.length >= 2) {
-                    lines.push({ points: cachedRSI1Points, width: 1, color: colors.RSI.RSI1 })
+                    lines.push({ points: cachedRSI1Points, width: 1, color: colors.rsi.rsi1 })
                 }
                 if (params.showRSI2 && cachedRSI2Points.length >= 2) {
-                    lines.push({ points: cachedRSI2Points, width: 1, color: colors.RSI.RSI2 })
+                    lines.push({ points: cachedRSI2Points, width: 1, color: colors.rsi.rsi2 })
                 }
                 if (params.showRSI3 && cachedRSI3Points.length >= 2) {
-                    lines.push({ points: cachedRSI3Points, width: 1, color: colors.RSI.RSI3 })
+                    lines.push({ points: cachedRSI3Points, width: 1, color: colors.rsi.rsi3 })
                 }
 
                 const allOk = lines.length > 0 && lineWebGLSurface.drawLineStrips(lines, scrollLeft)
@@ -269,7 +273,7 @@ const { ctx, pane, range, scrollLeft, dpr, kLineCenters, lineWebGLSurface } = co
             }
 
             if (!usedWebGL) {
-                drawRSILinesWithCanvas2D(ctx, scrollLeft, cachedRSI1Points, cachedRSI2Points, cachedRSI3Points, params, colors)
+                drawRSILinesWithCanvas2D(ctx, scrollLeft, cachedRSI1Points, cachedRSI2Points, cachedRSI3Points, params, colors.rsi.rsi1, colors.rsi.rsi2, colors.rsi.rsi3)
             }
         },
 
@@ -297,7 +301,9 @@ export function drawRSILinesWithCanvas2D(
     rsi2Points: LinePoint[],
     rsi3Points: LinePoint[],
     params: { showRSI1: boolean; showRSI2: boolean; showRSI3: boolean },
-    colors: ThemeColors
+    rsi1Color: string,
+    rsi2Color: string,
+    rsi3Color: string
 ): void {
     ctx.save()
     ctx.translate(-scrollLeft, 0)
@@ -306,7 +312,7 @@ export function drawRSILinesWithCanvas2D(
     ctx.lineCap = 'round'
 
     if (params.showRSI1 && rsi1Points.length >= 2) {
-        ctx.strokeStyle = colors.RSI.RSI1
+        ctx.strokeStyle = rsi1Color
         ctx.beginPath()
         ctx.moveTo(rsi1Points[0]!.x, rsi1Points[0]!.y)
         for (let i = 1; i < rsi1Points.length; i++) {
@@ -317,7 +323,7 @@ export function drawRSILinesWithCanvas2D(
     }
 
     if (params.showRSI2 && rsi2Points.length >= 2) {
-        ctx.strokeStyle = colors.RSI.RSI2
+        ctx.strokeStyle = rsi2Color
         ctx.beginPath()
         ctx.moveTo(rsi2Points[0]!.x, rsi2Points[0]!.y)
         for (let i = 1; i < rsi2Points.length; i++) {
@@ -328,7 +334,7 @@ export function drawRSILinesWithCanvas2D(
     }
 
     if (params.showRSI3 && rsi3Points.length >= 2) {
-        ctx.strokeStyle = colors.RSI.RSI3
+        ctx.strokeStyle = rsi3Color
         ctx.beginPath()
         ctx.moveTo(rsi3Points[0]!.x, rsi3Points[0]!.y)
         for (let i = 1; i < rsi3Points.length; i++) {
@@ -348,9 +354,10 @@ export function getRSITitleInfo(
     period3: number,
     pluginHost: PluginHost,
     paneId: string = 'sub_RSI',
-    theme: ChartTheme = 'light'
+    theme: 'light' | 'dark' = 'light',
+    isAsiaMarket?: boolean
 ): { name: string; params: number[]; values: Array<{ label: string; value: number; color: string }> } | null {
-    const colors = getColors(theme)
+    const colors = resolveThemeColors(theme, isAsiaMarket)
     const stateKey = createRSIStateKey(paneId)
     const state = pluginHost.getSharedState<RSIRenderState>(stateKey)
 
@@ -361,9 +368,9 @@ export function getRSITitleInfo(
     const rsi3 = state.series[period3]?.[index]
 
     const values: Array<{ label: string; value: number; color: string }> = []
-    if (rsi1 !== undefined) values.push({ label: `RSI${period1}`, value: rsi1, color: colors.RSI.RSI1 })
-    if (rsi2 !== undefined) values.push({ label: `RSI${period2}`, value: rsi2, color: colors.RSI.RSI2 })
-    if (rsi3 !== undefined) values.push({ label: `RSI${period3}`, value: rsi3, color: colors.RSI.RSI3 })
+    if (rsi1 !== undefined) values.push({ label: `RSI${period1}`, value: rsi1, color: colors.rsi.rsi1 })
+    if (rsi2 !== undefined) values.push({ label: `RSI${period2}`, value: rsi2, color: colors.rsi.rsi2 })
+    if (rsi3 !== undefined) values.push({ label: `RSI${period3}`, value: rsi3, color: colors.rsi.rsi3 })
 
     if (values.length === 0) return null
 

package/src/engine/renderers/Indicator/scale/indicator_scale.ts

@@ -1,7 +1,7 @@
 import type { RendererPluginWithHost, PluginHost, RenderContext, BaseIndicatorState } from '../../../../plugin'
 import { RENDERER_PRIORITY } from '../../../../plugin'
 import { createIndicatorStateKey } from '../../../../plugin/stateKeys'
-import { getColors, type ThemeColors } from '../../../theme/colors'
+import { resolveThemeColors } from '../../../../tokens'
 import { getFont, setCanvasFont } from '../../../theme/fonts'
 import { calculateValueTickPositions, type ScaleType } from '../../../utils/tickPosition'
 import { drawCrosshairPriceLabel } from '../../../../utils/kLineDraw/axis'
@@ -62,7 +62,7 @@ export interface DrawScaleTicksOptions {
 const BASELINE_MIDDLE = 'middle' as const
 const ALIGN_CENTER = 'center' as const
 
-export function drawScaleTicks(options: DrawScaleTicksOptions & { colors: ThemeColors }): void {
+export function drawScaleTicks(options: DrawScaleTicksOptions & { tickColor: string }): void {
     const {
         ctx,
         dpr,
@@ -85,7 +85,7 @@ export function drawScaleTicks(options: DrawScaleTicksOptions & { colors: ThemeC
     setCanvasFont(ctx, font)
     ctx.textBaseline = BASELINE_MIDDLE
     ctx.textAlign = ALIGN_CENTER
-    ctx.fillStyle = options.colors.TEXT.SECONDARY
+    ctx.fillStyle = options.tickColor
 
     const centerX = axisWidth / 2
     const centerXPx = roundToPhysicalPixel(centerX, dpr)
@@ -148,7 +148,7 @@ export function createIndicatorScaleRendererPlugin(options: IndicatorScaleRender
 
             const effectiveScaleType: ScaleType = pane.yAxis.getScaleType() ?? scaleType
             const effectiveAxisWidth = yAxisCtx.canvas ? (yAxisCtx.canvas.width / dpr) : axisWidth
-            const colors = getColors(context.theme)
+            const tokenColors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
 
             const displayRange = pane.yAxis.getDisplayRange({
                 minPrice: state.valueMin,
@@ -156,7 +156,7 @@ export function createIndicatorScaleRendererPlugin(options: IndicatorScaleRender
             })
 
             drawScaleTicks({
-                colors,
+                tickColor: tokenColors.text.secondary,
                 ctx: yAxisCtx,
                 dpr,
                 axisWidth: effectiveAxisWidth,
@@ -198,7 +198,7 @@ export function createIndicatorScaleRendererPlugin(options: IndicatorScaleRender
                 priceOffset: 0,
                 price: displayPrice,
                 formatPrice: formatCrosshairLabel,
-            })
+            }, context.theme, context.isAsiaMarket, context.colorPresetSettings)
         },
     }
 }

package/src/engine/renderers/Indicator/stoch.ts

@@ -1,6 +1,6 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
-import { getColors, type ChartTheme } from '../../theme/colors'
+import { resolveThemeColors } from '../../../tokens'
 import { alignToPhysicalPixelCenter } from '../../draw/pixelAlign'
 import type { STOCHRenderState } from '../../indicators/stochState'
 import { createSTOCHStateKey } from '../../indicators/stochState'
@@ -152,7 +152,7 @@ export function createSTOCHRendererPlugin(options: STOCHRendererOptions = {}): R
 
         draw(context: RenderContext) {
 const { ctx, pane, range, scrollLeft, dpr, kLineCenters, lineWebGLSurface } = context
-            const colors = getColors(context.theme)
+            const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
 
             const stateKey = resolveKey()
             if (!stateKey) return
@@ -238,10 +238,10 @@ const { ctx, pane, range, scrollLeft, dpr, kLineCenters, lineWebGLSurface } = co
             if (enableWebGL && lineWebGLSurface?.isAvailable()) {
                 const lines: Array<{ points: LinePoint[]; width: number; color: string }> = []
                 if (params.showK && cachedKPoints.length >= 2) {
-                    lines.push({ points: cachedKPoints, width: 1, color: colors.KDJ.K })
+                    lines.push({ points: cachedKPoints, width: 1, color: colors.kdj.k })
                 }
                 if (params.showD && cachedDPoints.length >= 2) {
-                    lines.push({ points: cachedDPoints, width: 1, color: colors.KDJ.D })
+                    lines.push({ points: cachedDPoints, width: 1, color: colors.kdj.d })
                 }
 
                 const allOk = lines.length > 0 && lineWebGLSurface.drawLineStrips(lines, scrollLeft)
@@ -279,7 +279,7 @@ function drawSTOCHLinesWithCanvas2D(
     kPoints: LinePoint[],
     dPoints: LinePoint[],
     params: { showK: boolean; showD: boolean },
-    colors: { KDJ: { K: string; D: string } }
+    colors: { kdj: { k: string; d: string } }
 ): void {
     ctx.save()
     ctx.translate(-scrollLeft, 0)
@@ -288,7 +288,7 @@ function drawSTOCHLinesWithCanvas2D(
     ctx.lineCap = 'round'
 
     if (params.showK && kPoints.length >= 2) {
-        ctx.strokeStyle = colors.KDJ.K
+        ctx.strokeStyle = colors.kdj.k
         ctx.beginPath()
         ctx.moveTo(kPoints[0]!.x, kPoints[0]!.y)
         for (let i = 1; i < kPoints.length; i++) {
@@ -299,7 +299,7 @@ function drawSTOCHLinesWithCanvas2D(
     }
 
     if (params.showD && dPoints.length >= 2) {
-        ctx.strokeStyle = colors.KDJ.D
+        ctx.strokeStyle = colors.kdj.d
         ctx.beginPath()
         ctx.moveTo(dPoints[0]!.x, dPoints[0]!.y)
         for (let i = 1; i < dPoints.length; i++) {
@@ -321,9 +321,10 @@ export function getSTOCHTitleInfo(
     m: number,
     pluginHost: PluginHost,
     paneId: string = 'sub_STOCH',
-    theme: ChartTheme = 'light'
+    theme: 'light' | 'dark' = 'light',
+    isAsiaMarket?: boolean
 ): { name: string; params: number[]; values: Array<{ label: string; value: number; color: string }> } | null {
-    const colors = getColors(theme)
+    const colors = resolveThemeColors(theme, isAsiaMarket)
     const state = pluginHost.getSharedState<STOCHRenderState>(createSTOCHStateKey(paneId))
     if (!state) return null
 
@@ -331,8 +332,8 @@ export function getSTOCHTitleInfo(
     if (!point || point.k === undefined) return null
 
     const values = []
-    if (state.params.showK) values.push({ label: 'K', value: point.k, color: colors.KDJ.K })
-    if (state.params.showD) values.push({ label: 'D', value: point.d, color: colors.KDJ.D })
+    if (state.params.showK) values.push({ label: 'K', value: point.k, color: colors.kdj.k })
+    if (state.params.showD) values.push({ label: 'D', value: point.d, color: colors.kdj.d })
 
     if (values.length === 0) return null
 

package/src/engine/renderers/Indicator/structure.ts

@@ -1,4 +1,4 @@
-import { getColors } from '../../theme/colors'
+import { resolveThemeColors } from '../../../tokens'
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
 import type { StructureRenderState } from '../../indicators/structureState'
@@ -41,7 +41,7 @@ export function createStructureRendererPlugin(options: { paneId?: string } = {})
         getDeclaredNamespaces() { const key = resolveKey(); return key ? [key] : [] },
         draw(context: RenderContext) {
             const { ctx, pane, range, scrollLeft, kLineCenters } = context
-            const colors = getColors(context.theme)
+            const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
             const stateKey = resolveKey()
             if (!stateKey) return
             const state = pluginHost?.getSharedState<StructureRenderState>(stateKey)
@@ -64,7 +64,7 @@ export function createStructureRendererPlugin(options: { paneId?: string } = {})
                     const centerX = kLineCenters[s.index - range.start]
                     if (centerX === undefined) continue
                     const y = toY(s.price)
-                    ctx.fillStyle = s.label === 'HH' ? colors.STRUCTURE.HH : s.label === 'HL' ? colors.STRUCTURE.HL : s.label === 'LH' ? colors.STRUCTURE.LH : colors.STRUCTURE.LL
+                    ctx.fillStyle = s.label === 'HH' ? colors.structure.hh : s.label === 'HL' ? colors.structure.hl : s.label === 'LH' ? colors.structure.lh : colors.structure.ll
                     const labelY = s.kind === 'high' ? y - 8 : y + 16
                     ctx.fillText(s.label, centerX, labelY)
                     // Dot
@@ -86,12 +86,12 @@ export function createStructureRendererPlugin(options: { paneId?: string } = {})
                     const x2 = kLineCenters[ev.index - range.start]
                     if (x1 === undefined || x2 === undefined) continue
                     const y = toY(ev.brokenLevel)
-                    ctx.strokeStyle = ev.kind === 'BOS' ? colors.STRUCTURE.BOS : colors.STRUCTURE.CHOCH
+                    ctx.strokeStyle = ev.kind === 'BOS' ? colors.structure.bos : colors.structure.choch
                     ctx.beginPath()
                     ctx.moveTo(x1, y)
                     ctx.lineTo(x2, y)
                     ctx.stroke()
-                    ctx.fillStyle = ev.kind === 'BOS' ? colors.STRUCTURE.BOS : colors.STRUCTURE.CHOCH
+                    ctx.fillStyle = ev.kind === 'BOS' ? colors.structure.bos : colors.structure.choch
                     ctx.fillText(ev.kind, (x1 + x2) / 2, y - 4)
                 }
                 ctx.setLineDash([])

package/src/engine/renderers/Indicator/wmsr.ts

@@ -1,6 +1,6 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
-import { getColors, type ChartTheme } from '../../theme/colors'
+import { resolveThemeColors } from '../../../tokens'
 import { alignToPhysicalPixelCenter } from '../../draw/pixelAlign'
 import type { WMSRRenderState } from '../../indicators/wmsrState'
 import { createWMSRStateKey } from '../../indicators/wmsrState'
@@ -82,7 +82,7 @@ export function createWMSRRendererPlugin(options: WMSRRendererOptions = {}): Ren
         displayMin: number,
         displayMax: number,
         dpr: number,
-        colors: { WMSR: { OVERBOUGHT: string; OVERSOLD: string }; WMSR_GRID: string }
+        colors: { wmsr: { overbought: string; oversold: string }; wmsrGrid: string }
     ): void {
         const displayValueRange = displayMax - displayMin || 1
         const y20 = alignToPhysicalPixelCenter(paneHeight - (-20 - displayMin) / displayValueRange * paneHeight, dpr)
@@ -95,19 +95,19 @@ export function createWMSRRendererPlugin(options: WMSRRendererOptions = {}): Ren
         ctx.lineWidth = 1
         ctx.setLineDash([4, 4])
 
-        ctx.strokeStyle = colors.WMSR.OVERBOUGHT
+        ctx.strokeStyle = colors.wmsr.overbought
         ctx.beginPath()
         ctx.moveTo(0, y20)
         ctx.lineTo(paneWidth, y20)
         ctx.stroke()
 
-        ctx.strokeStyle = colors.WMSR.OVERSOLD
+        ctx.strokeStyle = colors.wmsr.oversold
         ctx.beginPath()
         ctx.moveTo(0, y80)
         ctx.lineTo(paneWidth, y80)
         ctx.stroke()
 
-        ctx.strokeStyle = colors.WMSR_GRID
+        ctx.strokeStyle = colors.wmsrGrid
         ctx.beginPath()
         ctx.moveTo(0, y50)
         ctx.lineTo(paneWidth, y50)
@@ -160,7 +160,7 @@ export function createWMSRRendererPlugin(options: WMSRRendererOptions = {}): Ren
 
         draw(context: RenderContext) {
 const { ctx, pane, range, scrollLeft, dpr, kLineCenters, lineWebGLSurface } = context
-            const colors = getColors(context.theme)
+            const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
 
             const stateKey = resolveKey()
             if (!stateKey) return
@@ -230,7 +230,7 @@ const { ctx, pane, range, scrollLeft, dpr, kLineCenters, lineWebGLSurface } = co
             if (enableWebGL && lineWebGLSurface?.isAvailable()) {
                 if (params.showWMSR && cachedWMSRPoints.length >= 2) {
                     const ok = lineWebGLSurface.drawLineStrips(
-                        [{ points: cachedWMSRPoints, width: 1, color: colors.WMSR.WMSR }],
+                        [{ points: cachedWMSRPoints, width: 1, color: colors.wmsr.wmsr }],
                         scrollLeft
                     )
                     if (ok) {
@@ -266,13 +266,13 @@ function drawWMSRLineWithCanvas2D(
     scrollLeft: number,
     wmsrPoints: LinePoint[],
     params: { showWMSR: boolean },
-    colors: { WMSR: { WMSR: string } }
+    colors: { wmsr: { wmsr: string } }
 ): void {
     if (!params.showWMSR || wmsrPoints.length < 2) return
 
     ctx.save()
     ctx.translate(-scrollLeft, 0)
-    ctx.strokeStyle = colors.WMSR.WMSR
+    ctx.strokeStyle = colors.wmsr.wmsr
     ctx.lineWidth = 1
     ctx.lineJoin = 'round'
     ctx.lineCap = 'round'
@@ -294,9 +294,10 @@ export function getWMSRTitleInfo(
     period: number,
     pluginHost: PluginHost,
     paneId: string = 'sub_WMSR',
-    theme: ChartTheme = 'light'
+    theme: 'light' | 'dark' = 'light',
+    isAsiaMarket?: boolean
 ): { name: string; params: number[]; values: Array<{ label: string; value: number; color: string }> } | null {
-    const colors = getColors(theme)
+    const colors = resolveThemeColors(theme, isAsiaMarket)
     const state = pluginHost.getSharedState<WMSRRenderState>(createWMSRStateKey(paneId))
     if (!state) return null
 
@@ -307,7 +308,7 @@ export function getWMSRTitleInfo(
         name: 'WMSR',
         params: [period],
         values: [
-            { label: 'WMSR', value: wmsr, color: colors.WMSR.WMSR },
+            { label: 'WMSR', value: wmsr, color: colors.wmsr.wmsr },
         ],
     }
 }

package/src/engine/renderers/Indicator/zones.ts

@@ -1,4 +1,4 @@
-import { getColors } from '../../theme/colors'
+import { resolveThemeColors } from '../../../tokens'
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
 import type { ZonesRenderState } from '../../indicators/zonesState'
@@ -39,7 +39,7 @@ export function createZonesRendererPlugin(options: { paneId?: string } = {}): Re
         getDeclaredNamespaces() { const key = resolveKey(); return key ? [key] : [] },
         draw(context: RenderContext) {
             const { ctx, pane, range, scrollLeft, kLineCenters } = context
-            const colors = getColors(context.theme)
+            const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
             const stateKey = resolveKey()
             if (!stateKey) return
             const state = pluginHost?.getSharedState<ZonesRenderState>(stateKey)
@@ -69,10 +69,10 @@ export function createZonesRendererPlugin(options: { paneId?: string } = {}): Re
 
                 const yHigh = toY(zone.high)
                 const yLow = toY(zone.low)
-                const fill = zone.kind === 'FVG_BULL' ? colors.ZONES.FVG_BULL_FILL
-                    : zone.kind === 'FVG_BEAR' ? colors.ZONES.FVG_BEAR_FILL
-                    : zone.kind === 'OB_BULL' ? colors.ZONES.OB_BULL_FILL
-                    : colors.ZONES.OB_BEAR_FILL
+                const fill = zone.kind === 'FVG_BULL' ? colors.zones.fvgBullFill
+                    : zone.kind === 'FVG_BEAR' ? colors.zones.fvgBearFill
+                    : zone.kind === 'OB_BULL' ? colors.zones.obBullFill
+                    : colors.zones.obBearFill
                 ctx.fillStyle = fill
                 ctx.fillRect(startX, yHigh, endX - startX, yLow - yHigh)
             }
@@ -102,4 +102,4 @@ export function createZonesRendererPlugin(options: { paneId?: string } = {}): Re
 })
 class ZonesDefinition {
     static rendererFactory = createZonesRendererPlugin
-}
+}

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)