@363045841yyt/klinechart-core 0.7.6 → 0.7.7

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

@@ -1,8 +1,7 @@
 import type { RendererPluginWithHost, RenderContext, PluginHost } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
 import type { KLineData } from '../../../types/price'
-import { getColors } from '../../theme/colors'
-import type { ChartTheme, ThemeColors } from '../../theme/colors'
+import { resolveThemeColors } from '../../../tokens'
 import { alignToPhysicalPixelCenter } from '../../draw/pixelAlign'
 import type { MACDRenderState } from '../../indicators/macdState'
 import { createMACDStateKey } from '../../indicators/macdState'
@@ -131,7 +130,7 @@ export function createMACDRendererPlugin(options: MACDRendererOptions = {}): Ren
     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)
 
       // 从 StateStore 读取 MACD 状态
       const stateKey = resolveKey()
@@ -214,7 +213,7 @@ export function createMACDRendererPlugin(options: MACDRendererOptions = {}): Ren
 
         const usedWebGL = drawMacdBarsWithWebGL(context, barUpBuf, barUpCount, barUpLightBuf, barUpLightCount, barDownBuf, barDownCount, barDownLightBuf, barDownLightCount)
         if (!usedWebGL) {
-          drawMacdBarsWithCanvas2D(ctx, scrollLeft, colors, barUpBuf, barUpCount, barUpLightBuf, barUpLightCount, barDownBuf, barDownCount, barDownLightBuf, barDownLightCount)
+          drawMacdBarsWithCanvas2D(ctx, scrollLeft, colors.macd.barUp, colors.macd.barUpLight, colors.macd.barDown, colors.macd.barDownLight, barUpBuf, barUpCount, barUpLightBuf, barUpLightCount, barDownBuf, barDownCount, barDownLightBuf, barDownLightCount)
         } else {
           compositeMacdWebGL(ctx, context)
         }
@@ -256,10 +255,10 @@ export function createMACDRendererPlugin(options: MACDRendererOptions = {}): Ren
       if (enableWebGL && lineWebGLSurface?.isAvailable()) {
         const lines: Array<{ points: LinePoint[]; width: number; color: string }> = []
         if (config.showDIF && cachedDifPoints.length >= 2) {
-          lines.push({ points: cachedDifPoints, width: 1, color: colors.MACD.DIF })
+          lines.push({ points: cachedDifPoints, width: 1, color: colors.macd.dif })
         }
         if (config.showDEA && cachedDeaPoints.length >= 2) {
-          lines.push({ points: cachedDeaPoints, width: 1, color: colors.MACD.DEA })
+          lines.push({ points: cachedDeaPoints, width: 1, color: colors.macd.dea })
         }
         const allOk = lines.length > 0 && lineWebGLSurface.drawLineStrips(lines, scrollLeft)
         if (allOk) {
@@ -269,7 +268,7 @@ export function createMACDRendererPlugin(options: MACDRendererOptions = {}): Ren
       }
 
       if (!usedWebGLForLines) {
-        drawMacdLinesWithCanvas2D(ctx, scrollLeft, colors, cachedDifPoints, cachedDeaPoints, config)
+        drawMacdLinesWithCanvas2D(ctx, scrollLeft, colors.macd.dif, colors.macd.dea, cachedDifPoints, cachedDeaPoints, config)
       }
     },
 
@@ -313,17 +312,17 @@ function drawMacdBarsWithWebGL(
   barDownBuf: Float32Array, barDownCount: number,
   barDownLightBuf: Float32Array, barDownLightCount: number
 ): 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.candleWebGLSurface
   if (!surface || !surface.isAvailable()) return false
 
   surface.clear()
 
-  const ok1 = barUpCount === 0 || surface.drawRectBuffer(barUpBuf.subarray(0, barUpCount * 4), barUpCount, colors.MACD.BAR_UP, context.scrollLeft)
-  const ok2 = barUpLightCount === 0 || surface.drawRectBuffer(barUpLightBuf.subarray(0, barUpLightCount * 4), barUpLightCount, colors.MACD.BAR_UP_LIGHT, context.scrollLeft)
-  const ok3 = barDownCount === 0 || surface.drawRectBuffer(barDownBuf.subarray(0, barDownCount * 4), barDownCount, colors.MACD.BAR_DOWN, context.scrollLeft)
-  const ok4 = barDownLightCount === 0 || surface.drawRectBuffer(barDownLightBuf.subarray(0, barDownLightCount * 4), barDownLightCount, colors.MACD.BAR_DOWN_LIGHT, context.scrollLeft)
+  const ok1 = barUpCount === 0 || surface.drawRectBuffer(barUpBuf.subarray(0, barUpCount * 4), barUpCount, colors.macd.barUp, context.scrollLeft)
+  const ok2 = barUpLightCount === 0 || surface.drawRectBuffer(barUpLightBuf.subarray(0, barUpLightCount * 4), barUpLightCount, colors.macd.barUpLight, context.scrollLeft)
+  const ok3 = barDownCount === 0 || surface.drawRectBuffer(barDownBuf.subarray(0, barDownCount * 4), barDownCount, colors.macd.barDown, context.scrollLeft)
+  const ok4 = barDownLightCount === 0 || surface.drawRectBuffer(barDownLightBuf.subarray(0, barDownLightCount * 4), barDownLightCount, colors.macd.barDownLight, context.scrollLeft)
 
   return ok1 && ok2 && ok3 && ok4
 }
@@ -331,7 +330,8 @@ function drawMacdBarsWithWebGL(
 function drawMacdBarsWithCanvas2D(
   ctx: CanvasRenderingContext2D,
   scrollLeft: number,
-  colors: { MACD: { BAR_UP: string; BAR_UP_LIGHT: string; BAR_DOWN: string; BAR_DOWN_LIGHT: string } },
+  barUpColor: string, barUpLightColor: string,
+  barDownColor: string, barDownLightColor: string,
   barUpBuf: Float32Array, barUpCount: number,
   barUpLightBuf: Float32Array, barUpLightCount: number,
   barDownBuf: Float32Array, barDownCount: number,
@@ -340,25 +340,25 @@ function drawMacdBarsWithCanvas2D(
   ctx.save()
   ctx.translate(-scrollLeft, 0)
 
-  ctx.fillStyle = colors.MACD.BAR_UP
+  ctx.fillStyle = barUpColor
   for (let i = 0; i < barUpCount; i++) {
     const off = i * 4
     ctx.fillRect(barUpBuf[off], barUpBuf[off + 1], barUpBuf[off + 2], barUpBuf[off + 3])
   }
 
-  ctx.fillStyle = colors.MACD.BAR_UP_LIGHT
+  ctx.fillStyle = barUpLightColor
   for (let i = 0; i < barUpLightCount; i++) {
     const off = i * 4
     ctx.fillRect(barUpLightBuf[off], barUpLightBuf[off + 1], barUpLightBuf[off + 2], barUpLightBuf[off + 3])
   }
 
-  ctx.fillStyle = colors.MACD.BAR_DOWN
+  ctx.fillStyle = barDownColor
   for (let i = 0; i < barDownCount; i++) {
     const off = i * 4
     ctx.fillRect(barDownBuf[off], barDownBuf[off + 1], barDownBuf[off + 2], barDownBuf[off + 3])
   }
 
-  ctx.fillStyle = colors.MACD.BAR_DOWN_LIGHT
+  ctx.fillStyle = barDownLightColor
   for (let i = 0; i < barDownLightCount; i++) {
     const off = i * 4
     ctx.fillRect(barDownLightBuf[off], barDownLightBuf[off + 1], barDownLightBuf[off + 2], barDownLightBuf[off + 3])
@@ -370,7 +370,8 @@ function drawMacdBarsWithCanvas2D(
 function drawMacdLinesWithCanvas2D(
   ctx: CanvasRenderingContext2D,
   scrollLeft: number,
-  colors: ThemeColors,
+  difColor: string,
+  deaColor: string,
   difPoints: LinePoint[],
   deaPoints: LinePoint[],
   config: { showDIF: boolean; showDEA: boolean }
@@ -382,7 +383,7 @@ function drawMacdLinesWithCanvas2D(
   ctx.lineCap = 'round'
 
   if (config.showDIF && difPoints.length >= 2) {
-    ctx.strokeStyle = colors.MACD.DIF
+    ctx.strokeStyle = difColor
     ctx.beginPath()
     ctx.moveTo(difPoints[0]!.x, difPoints[0]!.y)
     for (let i = 1; i < difPoints.length; i++) {
@@ -393,7 +394,7 @@ function drawMacdLinesWithCanvas2D(
   }
 
   if (config.showDEA && deaPoints.length >= 2) {
-    ctx.strokeStyle = colors.MACD.DEA
+    ctx.strokeStyle = deaColor
     ctx.beginPath()
     ctx.moveTo(deaPoints[0]!.x, deaPoints[0]!.y)
     for (let i = 1; i < deaPoints.length; i++) {
@@ -441,9 +442,10 @@ export function getMACDTitleInfo(
   signalPeriod: number,
   pluginHost: PluginHost,
   paneId: string = 'sub_MACD',
-  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<MACDRenderState>(createMACDStateKey(paneId))
   if (!state) return null
 
@@ -454,9 +456,9 @@ export function getMACDTitleInfo(
     name: 'MACD',
     params: [fastPeriod, slowPeriod, signalPeriod],
     values: [
-      { label: 'DIF', value: point.dif, color: colors.MACD.DIF },
-      { label: 'DEA', value: point.dea, color: colors.MACD.DEA },
-      { label: 'MACD', value: point.macd, color: point.macd >= 0 ? colors.MACD.BAR_UP : colors.MACD.BAR_DOWN },
+      { label: 'DIF', value: point.dif, color: colors.macd.dif },
+      { label: 'DEA', value: point.dea, color: colors.macd.dea },
+      { label: 'MACD', value: point.macd, color: point.macd >= 0 ? colors.macd.barUp : colors.macd.barDown },
     ],
   }
 }

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

@@ -1,6 +1,6 @@
 import type { RendererPluginWithHost, PluginHost, RenderContext } from '../../../plugin'
 import { RENDERER_PRIORITY } from '../../../plugin'
-import { getColors } from '../../theme/colors'
+import { resolveThemeColors } from '../../../tokens'
 import { getFont, setCanvasFont } from '../../theme/fonts'
 import type { MACDRenderState } from '../../indicators/macdState'
 import { createMACDStateKey } from '../../indicators/macdState'
@@ -59,7 +59,7 @@ export function createMACDLegendRendererPlugin(options: MACDLegendOptions = {}):
 
         draw(context: RenderContext) {
             const { ctx, range } = context
-            const colors = getColors(context.theme)
+            const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
 
             // 从 StateStore 读取 MACD 状态
             const state = pluginHost?.getSharedState<MACDRenderState>(stateKey)
@@ -103,22 +103,22 @@ export function createMACDLegendRendererPlugin(options: MACDLegendOptions = {}):
             ctx.textBaseline = 'top'
 
             const paramText = `MACD(${fastPeriod},${slowPeriod},${signalPeriod})`
-            ctx.fillStyle = colors.TEXT.TERTIARY
+            ctx.fillStyle = colors.text.tertiary
             ctx.fillText(paramText, x, y)
             x += measureTextWidth(ctx, paramText) + gap
 
             const difText = `DIF:${macdValue.dif.toFixed(2)}`
-            ctx.fillStyle = colors.MACD.DIF
+            ctx.fillStyle = colors.macd.dif
             ctx.fillText(difText, x, y)
             x += measureTextWidth(ctx, difText) + gap
 
             const deaText = `DEA:${macdValue.dea.toFixed(2)}`
-            ctx.fillStyle = colors.MACD.DEA
+            ctx.fillStyle = colors.macd.dea
             ctx.fillText(deaText, x, y)
             x += measureTextWidth(ctx, deaText) + gap
 
             const macdText = `MACD:${macdValue.macd.toFixed(2)}`
-            ctx.fillStyle = macdValue.macd >= 0 ? colors.MACD.BAR_UP : colors.MACD.BAR_DOWN
+            ctx.fillStyle = macdValue.macd >= 0 ? colors.macd.barUp : colors.macd.barDown
             ctx.fillText(macdText, x, y)
 
             ctx.restore()

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

@@ -5,7 +5,7 @@ import { MA_STATE_KEY, type MARenderState } from '../../indicators/maState'
 import { BOLL_STATE_KEY, type BOLLRenderState } from '../../indicators/bollState'
 import { EXPMA_STATE_KEY, type EXPMARenderState } from '../../indicators/expmaState'
 import { ENE_STATE_KEY, type ENERenderState } from '../../indicators/eneState'
-import { getColors } from '../../theme/colors'
+import { resolveThemeColors } from '../../../tokens'
 import { getFont, setCanvasFont } from '../../theme/fonts'
 
 const textWidthCache = new Map<string, number>()
@@ -80,7 +80,7 @@ export function createMainIndicatorLegendRendererPlugin(options: {
     draw(context: RenderContext) {
       const { overlayCtx, data, range, crosshairIndex } = context
       const klineData = data as KLineData[]
-      const colors = getColors(context.theme)
+      const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
       if (!klineData.length || !overlayCtx) return
 
       const fontSize = 12
@@ -104,13 +104,13 @@ export function createMainIndicatorLegendRendererPlugin(options: {
 
             if (state && state.visibleMin <= state.visibleMax) {
               for (const period of state.enabledPeriods) {
-                const colorKey = `MA${period}` as keyof typeof colors.MA
+                const colorKey = `ma${period}` as keyof typeof colors.ma
                 const series = state.series[period]
                 const value = series?.[targetIndex]
 
                 items.push({
                   label: `MA${period}`,
-                  color: colors.MA[colorKey] || colors.MA.MA5,
+                  color: colors.ma[colorKey] || colors.ma.ma5,
                   value: value,
                 })
               }
@@ -120,7 +120,7 @@ export function createMainIndicatorLegendRendererPlugin(options: {
               let x = legendX
               const y = config.yPaddingPx / 2 + fontSize + rowIndex * lineHeight
 
-              overlayCtx.fillStyle = colors.PRICE.NEUTRAL
+              overlayCtx.fillStyle = colors.text.primary
               overlayCtx.fillText('MA', x, y)
               x += measureTextWidth(overlayCtx, 'MA') + gap
 
@@ -149,23 +149,23 @@ export function createMainIndicatorLegendRendererPlugin(options: {
             const y = config.yPaddingPx / 2 + fontSize + rowIndex * lineHeight
             const titleText = `BOLL(${period},${multiplier})`
 
-            overlayCtx.fillStyle = colors.PRICE.NEUTRAL
+            overlayCtx.fillStyle = colors.text.primary
             overlayCtx.fillText(titleText, x, y)
             x += measureTextWidth(overlayCtx, titleText) + gap
 
             if (boll) {
               const upperText = `上轨:${boll.upper.toFixed(2)}`
-              overlayCtx.fillStyle = colors.BOLL.UPPER
+              overlayCtx.fillStyle = colors.boll.upper
               overlayCtx.fillText(upperText, x, y)
               x += measureTextWidth(overlayCtx, upperText) + gap
 
               const middleText = `中轨:${boll.middle.toFixed(2)}`
-              overlayCtx.fillStyle = colors.BOLL.MIDDLE
+              overlayCtx.fillStyle = colors.boll.middle
               overlayCtx.fillText(middleText, x, y)
               x += measureTextWidth(overlayCtx, middleText) + gap
 
               const lowerText = `下轨:${boll.lower.toFixed(2)}`
-              overlayCtx.fillStyle = colors.BOLL.LOWER
+              overlayCtx.fillStyle = colors.boll.lower
               overlayCtx.fillText(lowerText, x, y)
             }
           }
@@ -185,18 +185,18 @@ export function createMainIndicatorLegendRendererPlugin(options: {
             const y = config.yPaddingPx / 2 + fontSize + rowIndex * lineHeight
             const titleText = `EXPMA(${fastPeriod},${slowPeriod})`
 
-            overlayCtx.fillStyle = colors.PRICE.NEUTRAL
+            overlayCtx.fillStyle = colors.text.primary
             overlayCtx.fillText(titleText, x, y)
             x += measureTextWidth(overlayCtx, titleText) + gap
 
             if (expma) {
               const fastText = `快:${expma.fast.toFixed(2)}`
-              overlayCtx.fillStyle = colors.EXPMA.FAST
+              overlayCtx.fillStyle = colors.expma.fast
               overlayCtx.fillText(fastText, x, y)
               x += measureTextWidth(overlayCtx, fastText) + gap
 
               const slowText = `慢:${expma.slow.toFixed(2)}`
-              overlayCtx.fillStyle = colors.EXPMA.SLOW
+              overlayCtx.fillStyle = colors.expma.slow
               overlayCtx.fillText(slowText, x, y)
             }
           }
@@ -216,23 +216,23 @@ export function createMainIndicatorLegendRendererPlugin(options: {
             const y = config.yPaddingPx / 2 + fontSize + rowIndex * lineHeight
             const titleText = `ENE(${period},${deviation})`
 
-            overlayCtx.fillStyle = colors.PRICE.NEUTRAL
+            overlayCtx.fillStyle = colors.text.primary
             overlayCtx.fillText(titleText, x, y)
             x += measureTextWidth(overlayCtx, titleText) + gap
 
             if (ene) {
               const upperText = `上轨:${ene.upper.toFixed(2)}`
-              overlayCtx.fillStyle = colors.ENE.UPPER
+              overlayCtx.fillStyle = colors.ene.upper
               overlayCtx.fillText(upperText, x, y)
               x += measureTextWidth(overlayCtx, upperText) + gap
 
               const middleText = `中轨:${ene.middle.toFixed(2)}`
-              overlayCtx.fillStyle = colors.ENE.MIDDLE
+              overlayCtx.fillStyle = colors.ene.middle
               overlayCtx.fillText(middleText, x, y)
               x += measureTextWidth(overlayCtx, middleText) + gap
 
               const lowerText = `下轨:${ene.lower.toFixed(2)}`
-              overlayCtx.fillStyle = colors.ENE.LOWER
+              overlayCtx.fillStyle = colors.ene.lower
               overlayCtx.fillText(lowerText, x, y)
             }
           }

package/src/engine/renderers/Indicator/mom.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 { MOMRenderState } from '../../indicators/momState'
 import { createMOMStateKey } from '../../indicators/momState'
@@ -82,7 +82,7 @@ export function createMOMRendererPlugin(options: MOMRendererOptions = {}): Rende
         displayMin: number,
         displayMax: number,
         dpr: number,
-        colors: { MOM: { ZERO: string } }
+        colors: { mom: { zero: string } }
     ): void {
         const displayValueRange = displayMax - displayMin || 1
         const zeroY = alignToPhysicalPixelCenter(paneHeight - (0 - displayMin) / displayValueRange * paneHeight, dpr)
@@ -90,7 +90,7 @@ export function createMOMRendererPlugin(options: MOMRendererOptions = {}): Rende
         ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
         ctx.save()
         ctx.scale(dpr, dpr)
-        ctx.strokeStyle = colors.MOM.ZERO
+        ctx.strokeStyle = colors.mom.zero
         ctx.lineWidth = 1
         ctx.beginPath()
         ctx.moveTo(0, zeroY)
@@ -143,7 +143,7 @@ export function createMOMRendererPlugin(options: MOMRendererOptions = {}): 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
@@ -213,7 +213,7 @@ const { ctx, pane, range, scrollLeft, dpr, kLineCenters, lineWebGLSurface } = co
             if (enableWebGL && lineWebGLSurface?.isAvailable()) {
                 if (params.showMOM && cachedMOMPoints.length >= 2) {
                     const ok = lineWebGLSurface.drawLineStrips(
-                        [{ points: cachedMOMPoints, width: 1, color: colors.MOM.MOM }],
+                        [{ points: cachedMOMPoints, width: 1, color: colors.mom.mom }],
                         scrollLeft
                     )
                     if (ok) {
@@ -249,13 +249,13 @@ function drawMOMLineWithCanvas2D(
     scrollLeft: number,
     momPoints: LinePoint[],
     params: { showMOM: boolean },
-    colors: { MOM: { MOM: string } }
+    colors: { mom: { mom: string } }
 ): void {
     if (!params.showMOM || momPoints.length < 2) return
 
     ctx.save()
     ctx.translate(-scrollLeft, 0)
-    ctx.strokeStyle = colors.MOM.MOM
+    ctx.strokeStyle = colors.mom.mom
     ctx.lineWidth = 1
     ctx.lineJoin = 'round'
     ctx.lineCap = 'round'
@@ -277,9 +277,10 @@ export function getMOMTitleInfo(
     period: number,
     pluginHost: PluginHost,
     paneId: string = 'sub_MOM',
-    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<MOMRenderState>(createMOMStateKey(paneId))
     if (!state) return null
 
@@ -290,7 +291,7 @@ export function getMOMTitleInfo(
         name: 'MOM',
         params: [period],
         values: [
-            { label: 'MOM', value: mom, color: colors.MOM.MOM },
+            { label: 'MOM', value: mom, color: colors.mom.mom },
         ],
     }
 }

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()
@@ -251,13 +251,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 +269,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 +297,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 +308,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 +319,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 +330,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 +350,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 +364,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