@363045841yyt/klinechart-core 0.7.6 → 0.7.7

package/src/config/chartSettings.ts

@@ -52,15 +52,24 @@ export const DEFAULT_SETTINGS = [
   { key: 'showVolumePriceMarkers', label: '显示量价关系标记', type: 'boolean', default: false, group: 'main' },
   { key: 'logarithmicScale', label: '对数价格轴', type: 'boolean', default: false, group: 'main' },
   { key: 'disableMainPaneVerticalScroll', label: '主图纵轴刻度自适应调整', type: 'boolean', default: true, group: 'main' },
+  { key: 'isAsiaMarket', label: '亚洲市场颜色（红涨绿跌）', type: 'boolean', default: false, group: 'main' },
   { key: 'enableWebGLRendering', label: '启用 WebGL 硬件加速渲染', type: 'boolean', default: ENABLE_WEBGL_DEFAULT, group: 'main' },
+  { key: 'theme', label: '主题', type: 'select', default: 'light', group: 'main', options: [
+    { value: 'light', label: '浅色' },
+    { value: 'dark', label: '深色' },
+    { value: 'auto', label: '跟随系统' },
+  ] },
   { key: 'performanceTest10kKlines', label: '万条K线性能测试', type: 'boolean', default: false, group: 'experimental' },
   { key: 'enableCanvasProfiler', label: 'Canvas 性能分析插桩', type: 'boolean', default: false, group: 'experimental' },
 ] as const
 
 /** 图表设置类型（从 DEFAULT_SETTINGS 自动推导，同时兼容扩展） */
 export type ChartSettings = {
-  [K in (typeof DEFAULT_SETTINGS)[number]['key']]?: boolean
-} & Record<string, boolean | string>
+  [K in (typeof DEFAULT_SETTINGS)[number]['key']]?: boolean | string
+} & Record<string, boolean | string | ColorPresetSettings | undefined> & {
+  colorPresetSettings?: ColorPresetSettings
+}
 
 /** localStorage 存储键名 */
 export const SETTINGS_STORAGE_KEY = 'kline-chart-settings'
+import type { ColorPresetSettings } from '../tokens/colorPresetSettings'

package/src/engine/chart.ts

@@ -1116,6 +1116,8 @@ export class Chart {
                 yAxisRanges: sharedYAxisRanges,
                 xAxisRanges: sharedXAxisRanges,
                 theme: this._themeSignal.peek(),
+                isAsiaMarket: this.settings.isAsiaMarket as boolean,
+                colorPresetSettings: this.settings.colorPresetSettings,
             }
 
             if (shouldUpdateMain || shouldUpdateOverlay) {
@@ -1193,6 +1195,8 @@ export class Chart {
                 xAxisLabels: sharedXAxisLabels,
                 xAxisRanges: sharedXAxisRanges,
                 theme: this._themeSignal.peek(),
+                isAsiaMarket: this.settings.isAsiaMarket as boolean,
+                colorPresetSettings: this.settings.colorPresetSettings,
             }
             const errors = this.rendererPluginManager.renderPlugin('timeAxis', timeAxisContext)
             if (errors.length > 0) {

package/src/engine/draw/pixelAlign.ts

@@ -2,8 +2,6 @@
  * 像素对齐工具函数 - 逻辑像素空间（配合 ctx.scale(dpr) 使用）
  */
 
-import { getColors } from '../theme/colors'
-
 /**
  * 将逻辑坐标对齐到物理像素边界（用于矩形填充）
  * @param value - 逻辑坐标值

package/src/engine/drawing/plugin.ts

@@ -190,7 +190,7 @@ export function createDrawingRendererPlugin(options: {
     description: '绘图渲染器（仅负责绘制形状）',
     debugName: '绘图层',
     paneId: options.paneId ?? 'main',
-    priority: -25,
+    priority: 55,
     draw(context: RenderContext) {
       const { ctx, pane, data, range, dpr, paneWidth, kLinePositions, kLineCenters, kBarRects, kWidth, kGap } = context
       const viewport = context.viewport ?? {

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

@@ -1,5 +1,6 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
+import { resolveThemeColors } from '../../../tokens'
 import type { ATRRenderState } from '../../indicators/atrState'
 import { createATRStateKey } from '../../indicators/atrState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
@@ -88,6 +89,8 @@ export function createATRRendererPlugin(options: ATRRendererOptions = {}): Rende
 
         draw(context: RenderContext) {
             const { ctx, pane, range, scrollLeft, kLineCenters, lineWebGLSurface } = context
+            const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
+            const atrColor = colors.palette?.indicatorAtr ?? ATR_COLOR
 
             const stateKey = resolveKey()
             if (!stateKey) return
@@ -147,7 +150,7 @@ export function createATRRendererPlugin(options: ATRRendererOptions = {}): Rende
             if (enableWebGL && lineWebGLSurface?.isAvailable()) {
                 if (cachedPoints.length >= 2) {
                     const ok = lineWebGLSurface.drawLineStrips(
-                        [{ points: cachedPoints, width: 1, color: ATR_COLOR }],
+                        [{ points: cachedPoints, width: 1, color: atrColor }],
                         scrollLeft,
                     )
                     if (ok) {
@@ -158,7 +161,7 @@ export function createATRRendererPlugin(options: ATRRendererOptions = {}): Rende
             }
 
             if (!usedWebGL) {
-                drawWithCanvas2D(ctx, scrollLeft, cachedPoints)
+                drawWithCanvas2D(ctx, scrollLeft, cachedPoints, atrColor)
             }
         },
 
@@ -179,11 +182,12 @@ function drawWithCanvas2D(
     ctx: CanvasRenderingContext2D,
     scrollLeft: number,
     points: LinePoint[],
+    atrColor: string,
 ): void {
     if (points.length < 2) return
     ctx.save()
     ctx.translate(-scrollLeft, 0)
-    ctx.strokeStyle = ATR_COLOR
+    ctx.strokeStyle = atrColor
     ctx.lineWidth = 1
     ctx.lineJoin = 'round'
     ctx.lineCap = 'round'

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

@@ -2,7 +2,7 @@ import type { RendererPluginWithHost, PluginHost, RenderContext } from '../../..
 import { RENDERER_PRIORITY } from '../../../plugin'
 import type { KLineData } from '../../../types/price'
 import { alignToPhysicalPixelCenter } from '../../draw/pixelAlign'
-import { getColors } from '../../theme/colors'
+import { resolveThemeColors } from '../../../tokens'
 import { BOLL_STATE_KEY, type BOLLRenderState } from '../../indicators/bollState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
@@ -54,7 +54,7 @@ function drawBOLLWithWebGL(
         bandLowerPoints: LinePoint[]
     }
 ): boolean {
-    const colors = getColors(context.theme)
+    const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
     if (context.settings?.enableWebGLRendering === false) return false
     const surface = context.lineWebGLSurface
     if (!surface || !surface.isAvailable()) return false
@@ -66,24 +66,24 @@ function drawBOLLWithWebGL(
         surface.clear()
         allOk = surface.drawFilledBand(
             { upperPoints: data.bandUpperPoints, lowerPoints: data.bandLowerPoints },
-            toOpaqueRgba(colors.BOLL.BAND_FILL),
+            toOpaqueRgba(colors.boll.bandFill),
             context.scrollLeft
         )
         if (allOk) {
-            compositeLineSurface(context, surface, getRgbaAlpha(colors.BOLL.BAND_FILL))
+            compositeLineSurface(context, surface, getRgbaAlpha(colors.boll.bandFill))
         }
     }
     surface.clear()
 
     const lineStrips: Array<{ points: LinePoint[]; width: number; color: string }> = []
     if (data.showUpper && data.upperPoints.length >= 2) {
-        lineStrips.push({ points: data.upperPoints, width: BOLL_LINE_WIDTH, color: colors.BOLL.UPPER })
+        lineStrips.push({ points: data.upperPoints, width: BOLL_LINE_WIDTH, color: colors.boll.upper })
     }
     if (data.showMiddle && data.middlePoints.length >= 2) {
-        lineStrips.push({ points: data.middlePoints, width: BOLL_LINE_WIDTH, color: colors.BOLL.MIDDLE })
+        lineStrips.push({ points: data.middlePoints, width: BOLL_LINE_WIDTH, color: colors.boll.middle })
     }
     if (data.showLower && data.lowerPoints.length >= 2) {
-        lineStrips.push({ points: data.lowerPoints, width: BOLL_LINE_WIDTH, color: colors.BOLL.LOWER })
+        lineStrips.push({ points: data.lowerPoints, width: BOLL_LINE_WIDTH, color: colors.boll.lower })
     }
 
     if (lineStrips.length > 0) {
@@ -183,7 +183,7 @@ export function createBOLLRendererPlugin(): RendererPluginWithHost {
         draw(context: RenderContext) {
             const { ctx, pane, data, range, scrollLeft, dpr, kLineCenters } = context
             const klineData = data as KLineData[]
-            const colors = getColors(context.theme)
+            const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
 
             const stateKey = resolveKey()
             if (!stateKey) return
@@ -281,7 +281,7 @@ export function createBOLLRendererPlugin(): RendererPluginWithHost {
                     bandPath.lineTo(bandLowerPoints[i].x, bandLowerPoints[i].y)
                 }
                 bandPath.closePath()
-                ctx.fillStyle = colors.BOLL.BAND_FILL
+                ctx.fillStyle = colors.boll.bandFill
                 ctx.fill(bandPath)
             }
 
@@ -296,9 +296,9 @@ export function createBOLLRendererPlugin(): RendererPluginWithHost {
                 ctx.stroke()
             }
 
-            if (showUpper) drawLine(upperPoints, colors.BOLL.UPPER)
-            if (showMiddle) drawLine(middlePoints, colors.BOLL.MIDDLE)
-            if (showLower) drawLine(lowerPoints, colors.BOLL.LOWER)
+            if (showUpper) drawLine(upperPoints, colors.boll.upper)
+            if (showMiddle) drawLine(middlePoints, colors.boll.middle)
+            if (showLower) drawLine(lowerPoints, colors.boll.lower)
 
             ctx.restore()
         },

package/src/engine/renderers/Indicator/cci.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 type { CCIRenderState } from '../../indicators/cciState'
 import { createCCIStateKey } from '../../indicators/cciState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
@@ -92,7 +92,7 @@ export function createCCIRendererPlugin(options: CCIRendererOptions = {}): 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)
 
             const stateKey = resolveKey()
             if (!stateKey) return
@@ -123,7 +123,7 @@ const { ctx, pane, range, scrollLeft, dpr, kLineCenters, lineWebGLSurface } = co
             const lineStartX = scrollLeft
             const lineEndX = scrollLeft + context.paneWidth
 
-            ctx.strokeStyle = colors.CCI.OVERBOUGHT
+            ctx.strokeStyle = colors.cci.overbought
             ctx.lineWidth = 1
             ctx.setLineDash([4, 4])
             ctx.beginPath()
@@ -131,7 +131,7 @@ const { ctx, pane, range, scrollLeft, dpr, kLineCenters, lineWebGLSurface } = co
             ctx.lineTo(lineEndX, y100)
             ctx.stroke()
 
-            ctx.strokeStyle = colors.CCI.OVERSOLD
+            ctx.strokeStyle = colors.cci.oversold
             ctx.beginPath()
             ctx.moveTo(lineStartX, yNeg100)
             ctx.lineTo(lineEndX, yNeg100)
@@ -177,7 +177,7 @@ const { ctx, pane, range, scrollLeft, dpr, kLineCenters, lineWebGLSurface } = co
             if (enableWebGL && lineWebGLSurface?.isAvailable()) {
                 if (params.showCCI && cachedCCIPoints.length >= 2) {
                     const ok = lineWebGLSurface.drawLineStrips(
-                        [{ points: cachedCCIPoints, width: 1, color: colors.CCI.CCI }],
+                        [{ points: cachedCCIPoints, width: 1, color: colors.cci.cci }],
                         scrollLeft
                     )
                     if (ok) {
@@ -213,13 +213,13 @@ function drawCCILineWithCanvas2D(
     scrollLeft: number,
     cciPoints: LinePoint[],
     params: { showCCI: boolean },
-    colors: { CCI: { CCI: string; OVERBOUGHT: string; OVERSOLD: string } }
+    colors: { cci: { cci: string; overbought: string; oversold: string } }
 ): void {
     if (!params.showCCI || cciPoints.length < 2) return
 
     ctx.save()
     ctx.translate(-scrollLeft, 0)
-    ctx.strokeStyle = colors.CCI.CCI
+    ctx.strokeStyle = colors.cci.cci
     ctx.lineWidth = 1
     ctx.lineJoin = 'round'
     ctx.lineCap = 'round'
@@ -241,9 +241,10 @@ export function getCCITitleInfo(
     period: number,
     pluginHost: PluginHost,
     paneId: string = 'sub_CCI',
-    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<CCIRenderState>(createCCIStateKey(paneId))
     if (!state) return null
 
@@ -254,7 +255,7 @@ export function getCCITitleInfo(
         name: 'CCI',
         params: [period],
         values: [
-            { label: 'CCI', value: cci, color: colors.CCI.CCI },
+            { label: 'CCI', value: cci, color: colors.cci.cci },
         ],
     }
 }

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

@@ -2,7 +2,7 @@ import type { RendererPluginWithHost, PluginHost, RenderContext } from '../../..
 import { RENDERER_PRIORITY } from '../../../plugin'
 import type { KLineData } from '../../../types/price'
 import { alignToPhysicalPixelCenter } from '../../draw/pixelAlign'
-import { getColors } from '../../theme/colors'
+import { resolveThemeColors } from '../../../tokens'
 import { ENE_STATE_KEY, type ENERenderState } from '../../indicators/eneState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
@@ -40,7 +40,7 @@ function drawENEWithWebGL(
         lowerPoints: LinePoint[]
     }
 ): boolean {
-    const colors = getColors(context.theme)
+    const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
     if (context.settings?.enableWebGLRendering === false) return false
     const surface = context.lineWebGLSurface
     if (!surface || !surface.isAvailable()) return false
@@ -52,24 +52,24 @@ function drawENEWithWebGL(
         surface.clear()
         allOk = surface.drawFilledBand(
             { upperPoints: data.upperPoints, lowerPoints: data.lowerPoints },
-            toOpaqueRgba(colors.ENE.BAND_FILL),
+            toOpaqueRgba(colors.ene.bandFill),
             context.scrollLeft
         )
         if (allOk) {
-            compositeLineSurface(context, surface, getRgbaAlpha(colors.ENE.BAND_FILL))
+            compositeLineSurface(context, surface, getRgbaAlpha(colors.ene.bandFill))
         }
     }
     surface.clear()
 
     const lineStrips: Array<{ points: LinePoint[]; width: number; color: string }> = []
     if (data.upperPoints.length >= 2) {
-        lineStrips.push({ points: data.upperPoints, width: 1, color: colors.ENE.UPPER })
+        lineStrips.push({ points: data.upperPoints, width: 1, color: colors.ene.upper })
     }
     if (data.middlePoints.length >= 2) {
-        lineStrips.push({ points: data.middlePoints, width: 1, color: colors.ENE.MIDDLE })
+        lineStrips.push({ points: data.middlePoints, width: 1, color: colors.ene.middle })
     }
     if (data.lowerPoints.length >= 2) {
-        lineStrips.push({ points: data.lowerPoints, width: 1, color: colors.ENE.LOWER })
+        lineStrips.push({ points: data.lowerPoints, width: 1, color: colors.ene.lower })
     }
     if (lineStrips.length > 0) {
         allOk = surface.drawLineStrips(lineStrips, context.scrollLeft)
@@ -143,7 +143,7 @@ export function createENERendererPlugin(): RendererPluginWithHost {
         draw(context: RenderContext) {
             const { ctx, pane, data, range, scrollLeft, dpr, kLineCenters } = context
             const klineData = data as KLineData[]
-            const colors = getColors(context.theme)
+            const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
 
             const stateKey = resolveKey()
             if (!stateKey) return
@@ -193,7 +193,7 @@ export function createENERendererPlugin(): RendererPluginWithHost {
             ctx.save()
             ctx.translate(-scrollLeft, 0)
 
-            ctx.fillStyle = colors.ENE.BAND_FILL
+            ctx.fillStyle = colors.ene.bandFill
             ctx.beginPath()
             if (upperPoints.length > 0) {
                 ctx.moveTo(upperPoints[0]!.x, upperPoints[0]!.y)
@@ -225,9 +225,9 @@ export function createENERendererPlugin(): RendererPluginWithHost {
                 ctx.stroke()
             }
 
-            drawLine(upperPoints, colors.ENE.UPPER)
-            drawLine(middlePoints, colors.ENE.MIDDLE)
-            drawLine(lowerPoints, colors.ENE.LOWER)
+            drawLine(upperPoints, colors.ene.upper)
+            drawLine(middlePoints, colors.ene.middle)
+            drawLine(lowerPoints, colors.ene.lower)
 
             ctx.restore()
         },

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

@@ -2,7 +2,7 @@ import type { RendererPluginWithHost, PluginHost, RenderContext } from '../../..
 import { RENDERER_PRIORITY } from '../../../plugin'
 import type { KLineData } from '../../../types/price'
 import { alignToPhysicalPixelCenter } from '../../draw/pixelAlign'
-import { getColors } from '../../theme/colors'
+import { resolveThemeColors } from '../../../tokens'
 import { EXPMA_STATE_KEY, type EXPMARenderState } from '../../indicators/expmaState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
@@ -82,7 +82,7 @@ export function createEXPMARendererPlugin(): RendererPluginWithHost {
         draw(context: RenderContext) {
             const { ctx, pane, data, range, scrollLeft, dpr, kLineCenters, lineWebGLSurface } = context
             const klineData = data as KLineData[]
-            const colors = getColors(context.theme)
+            const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
             const stateKey = resolveKey()
             if (!stateKey) return
             const state = pluginHost?.getSharedState<EXPMARenderState>(stateKey)
@@ -123,10 +123,10 @@ export function createEXPMARendererPlugin(): RendererPluginWithHost {
             if (enableWebGL && lineWebGLSurface?.isAvailable()) {
                 const lines: Array<{ points: LinePoint[]; width: number; color: string }> = []
                 if (cachedFastPoints.length >= 2) {
-                    lines.push({ points: cachedFastPoints, width: 1, color: colors.EXPMA.FAST })
+                    lines.push({ points: cachedFastPoints, width: 1, color: colors.expma.fast })
                 }
                 if (cachedSlowPoints.length >= 2) {
-                    lines.push({ points: cachedSlowPoints, width: 1, color: colors.EXPMA.SLOW })
+                    lines.push({ points: cachedSlowPoints, width: 1, color: colors.expma.slow })
                 }
 
                 const allOk = lines.length > 0 && lineWebGLSurface.drawLineStrips(lines, scrollLeft)
@@ -146,7 +146,7 @@ export function createEXPMARendererPlugin(): RendererPluginWithHost {
             ctx.lineCap = 'round'
 
             if (cachedFastPoints.length >= 2) {
-                ctx.strokeStyle = colors.EXPMA.FAST
+                ctx.strokeStyle = colors.expma.fast
                 ctx.beginPath()
                 ctx.moveTo(cachedFastPoints[0]!.x, cachedFastPoints[0]!.y)
                 for (let i = 1; i < cachedFastPoints.length; i++) {
@@ -157,7 +157,7 @@ export function createEXPMARendererPlugin(): RendererPluginWithHost {
             }
 
             if (cachedSlowPoints.length >= 2) {
-                ctx.strokeStyle = colors.EXPMA.SLOW
+                ctx.strokeStyle = colors.expma.slow
                 ctx.beginPath()
                 ctx.moveTo(cachedSlowPoints[0]!.x, cachedSlowPoints[0]!.y)
                 for (let i = 1; i < cachedSlowPoints.length; i++) {

package/src/engine/renderers/Indicator/fastk.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 { FASTKRenderState } from '../../indicators/fastkState'
 import { createFASTKStateKey } from '../../indicators/fastkState'
@@ -148,7 +148,7 @@ export function createFASTKRendererPlugin(options: FASTKRendererOptions = {}): 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
@@ -218,7 +218,7 @@ const { ctx, pane, range, scrollLeft, dpr, kLineCenters, lineWebGLSurface } = co
             if (enableWebGL && lineWebGLSurface?.isAvailable()) {
                 if (params.showFASTK && cachedFASTKPoints.length >= 2) {
                     const ok = lineWebGLSurface.drawLineStrips(
-                        [{ points: cachedFASTKPoints, width: 1, color: colors.KDJ.K }],
+                        [{ points: cachedFASTKPoints, width: 1, color: colors.kdj.k }],
                         scrollLeft
                     )
                     if (ok) {
@@ -254,13 +254,13 @@ function drawFASTKLineWithCanvas2D(
     scrollLeft: number,
     fastkPoints: LinePoint[],
     params: { showFASTK: boolean },
-    colors: { KDJ: { K: string } }
+    colors: { kdj: { k: string } }
 ): void {
     if (!params.showFASTK || fastkPoints.length < 2) return
 
     ctx.save()
     ctx.translate(-scrollLeft, 0)
-    ctx.strokeStyle = colors.KDJ.K
+    ctx.strokeStyle = colors.kdj.k
     ctx.lineWidth = 1
     ctx.lineJoin = 'round'
     ctx.lineCap = 'round'
@@ -282,9 +282,10 @@ export function getFASTKTitleInfo(
     period: number,
     pluginHost: PluginHost,
     paneId: string = 'sub_FASTK',
-    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<FASTKRenderState>(createFASTKStateKey(paneId))
     if (!state) return null
 
@@ -295,7 +296,7 @@ export function getFASTKTitleInfo(
         name: 'FASTK',
         params: [period],
         values: [
-            { label: 'FASTK', value: fastk, color: colors.KDJ.K },
+            { label: 'FASTK', value: fastk, color: colors.kdj.k },
         ],
     }
 }

package/src/engine/renderers/Indicator/kst.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 type { KSTRenderState } from '../../indicators/kstState'
 import { createKSTStateKey } from '../../indicators/kstState'
 import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
@@ -99,7 +99,7 @@ export function createKSTRendererPlugin(options: KSTRendererOptions = {}): 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)
 
             const stateKey = resolveKey()
             if (!stateKey) return
@@ -178,10 +178,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.showKST && cachedKSTPoints.length >= 2) {
-                    lines.push({ points: cachedKSTPoints, width: 1, color: colors.KST.KST })
+                    lines.push({ points: cachedKSTPoints, width: 1, color: colors.kst.kst })
                 }
                 if (params.showSignal && cachedSignalPoints.length >= 2) {
-                    lines.push({ points: cachedSignalPoints, width: 1, color: colors.KST.SIGNAL })
+                    lines.push({ points: cachedSignalPoints, width: 1, color: colors.kst.signal })
                 }
 
                 const allOk = lines.length > 0 && lineWebGLSurface.drawLineStrips(lines, scrollLeft)
@@ -219,7 +219,7 @@ function drawKSTLinesWithCanvas2D(
     kstPoints: LinePoint[],
     signalPoints: LinePoint[],
     params: { showKST: boolean; showSignal: boolean },
-    colors: { KST: { KST: string; SIGNAL: string } }
+    colors: { kst: { kst: string; signal: string } }
 ): void {
     ctx.save()
     ctx.translate(-scrollLeft, 0)
@@ -228,7 +228,7 @@ function drawKSTLinesWithCanvas2D(
     ctx.lineCap = 'round'
 
     if (params.showKST && kstPoints.length >= 2) {
-        ctx.strokeStyle = colors.KST.KST
+        ctx.strokeStyle = colors.kst.kst
         ctx.beginPath()
         ctx.moveTo(kstPoints[0]!.x, kstPoints[0]!.y)
         for (let i = 1; i < kstPoints.length; i++) {
@@ -239,7 +239,7 @@ function drawKSTLinesWithCanvas2D(
     }
 
     if (params.showSignal && signalPoints.length >= 2) {
-        ctx.strokeStyle = colors.KST.SIGNAL
+        ctx.strokeStyle = colors.kst.signal
         ctx.beginPath()
         ctx.moveTo(signalPoints[0]!.x, signalPoints[0]!.y)
         for (let i = 1; i < signalPoints.length; i++) {
@@ -264,9 +264,10 @@ export function getKSTTitleInfo(
     signalPeriod: number,
     pluginHost: PluginHost,
     paneId: string = 'sub_KST',
-    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<KSTRenderState>(createKSTStateKey(paneId))
     if (!state) return null
 
@@ -274,8 +275,8 @@ export function getKSTTitleInfo(
     if (!point) return null
 
     const values = []
-    if (state.params.showKST) values.push({ label: 'KST', value: point.kst, color: colors.KST.KST })
-    if (state.params.showSignal) values.push({ label: 'Signal', value: point.signal, color: colors.KST.SIGNAL })
+    if (state.params.showKST) values.push({ label: 'KST', value: point.kst, color: colors.kst.kst })
+    if (state.params.showSignal) values.push({ label: 'Signal', value: point.signal, color: colors.kst.signal })
 
     if (values.length === 0) return null
 

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

@@ -5,7 +5,7 @@ import { Indicator } from '../../indicators/indicatorDefinitionRegistry'
 import { resolveStateKey } from '../../indicators/indicatorMetadata'
 import type { IndicatorScheduler } from '../../indicators/scheduler'
 import { alignToPhysicalPixelCenter } from '../../draw/pixelAlign'
-import { getColors } from '../../theme/colors'
+import { resolveThemeColors } from '../../../tokens'
 
 // Re-export MAFlags from calculators for backward compatibility
 export type { MAFlags } from '../../indicators/calculators'
@@ -97,8 +97,8 @@ export function createMARendererPlugin(): RendererPluginWithHost {
 
         draw(context: RenderContext) {
             const { ctx, pane, range, scrollLeft, dpr, kLineCenters, lineWebGLSurface } = context
-            const colors = getColors(context.theme)
-            const maColors: Record<number, string> = { 5: colors.MA.MA5, 10: colors.MA.MA10, 20: colors.MA.MA20, 30: colors.MA.MA30, 60: colors.MA.MA60 }
+            const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
+            const maColors: Record<number, string> = { 5: colors.ma.ma5, 10: colors.ma.ma10, 20: colors.ma.ma20, 30: colors.ma.ma30, 60: colors.ma.ma60 }
             const stateKey = resolveKey()
             if (!stateKey) return
             const state = pluginHost?.getSharedState<MARenderState>(stateKey)
@@ -147,7 +147,7 @@ export function createMARendererPlugin(): RendererPluginWithHost {
                 for (const period of state.enabledPeriods) {
                     const points = cachedLines.get(period)
                     if (!points) continue
-                    lines.push({ points, width: 1, color: maColors[period] ?? colors.MA.MA5 })
+                    lines.push({ points, width: 1, color: maColors[period] ?? colors.ma.ma5 })
                 }
                 const allOk = lines.length > 0 && lineWebGLSurface.drawLineStrips(lines, scrollLeft)
 
@@ -170,7 +170,7 @@ export function createMARendererPlugin(): RendererPluginWithHost {
             for (const period of state.enabledPeriods) {
                 const points = cachedLines.get(period)
                 if (!points || points.length < 2) continue
-                ctx.strokeStyle = maColors[period] ?? colors.MA.MA5
+                ctx.strokeStyle = maColors[period] ?? colors.ma.ma5
                 ctx.beginPath()
                 ctx.moveTo(points[0]!.x, points[0]!.y)
                 for (let i = 1; i < points.length; i++) {