From 6239d30fbcecaafb162ceb1f7f122b3bc98bf45d Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sat, 2 Dec 2023 14:00:57 +0100
Subject: [PATCH] Add support for light Theme

---
 src/components/charts/CandleChart.vue | 2 +-
 src/composables/percentageTool.ts     | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/charts/CandleChart.vue b/src/components/charts/CandleChart.vue
index de23efcf..f2449e79 100644
--- a/src/components/charts/CandleChart.vue
+++ b/src/components/charts/CandleChart.vue
@@ -133,7 +133,7 @@ const diffCols = computed(() => {
   return getDiffColumnsFromPlotConfig(props.plotConfig);
 });
 
-usePercentageTool(candleChart);
+usePercentageTool(candleChart, props.theme);
 
 function updateChart(initial = false) {
   if (!hasData.value) {
diff --git a/src/composables/percentageTool.ts b/src/composables/percentageTool.ts
index 6ca29ad0..5c86b2cb 100644
--- a/src/composables/percentageTool.ts
+++ b/src/composables/percentageTool.ts
@@ -5,9 +5,11 @@ import { GraphicComponent } from 'echarts/components';
 
 use([GraphicComponent]);
 
-export function usePercentageTool(chartRef: Ref) {
+export function usePercentageTool(chartRef, theme: string) {
   const inputListener = useInputListener();
 
+  const color = theme === 'dark' ? 'white' : 'black';
+
   const mousePos = ref({ x: 0, y: 0 });
   const startPos = ref({ x: 0, y: 0 });
   const drawLimitPerSecond = 144;
@@ -37,7 +39,7 @@ export function usePercentageTool(chartRef: Ref) {
             y2: mousePos.value.y,
           },
           style: {
-            stroke: 'white',
+            stroke: color,
           },
         },
         { type: 'text', z: 5 },
@@ -74,7 +76,7 @@ export function usePercentageTool(chartRef: Ref) {
             y: y - 20,
             text: (startPrice < endPrice ? pct : '-' + pct) + '%',
             font: '16px sans-serif',
-            fill: 'white',
+            fill: color,
           },
         },
       ],