From 202fdf97d93376ec2c658f02a02fee9b732f4aa9 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Wed, 18 Oct 2023 07:05:33 +0200
Subject: [PATCH] Split profit colors from "up/Down colors

---
 src/components/charts/CandleChart.vue          | 13 ++++++-------
 src/components/charts/CandleChartContainer.vue |  3 ++-
 src/stores/colors.ts                           | 12 +++++++-----
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/charts/CandleChart.vue b/src/components/charts/CandleChart.vue
index cfb0dcbb..1b1bdb68 100644
--- a/src/components/charts/CandleChart.vue
+++ b/src/components/charts/CandleChart.vue
@@ -86,16 +86,15 @@ const props = defineProps({
     type: Object as () => ChartSliderPosition,
     default: () => undefined,
   },
-  colorPreference: { required: false, type: String, default: 'greenUp' },
+  colorUp: { required: false, type: String, default: '#12bb7b' },
+  colorDown: { required: false, type: String, default: '#ef5350' },
 });
 
 // Candle Colors
-const colorProfit = props.colorPreference === 'greenUp' ? '#26A69A' : '#EF5350';
-const colorLoss = props.colorPreference === 'greenUp' ? '#EF5350' : '#26A69A';
-const upColor = colorProfit;
-const upBorderColor = colorProfit;
-const downColor = colorLoss;
-const downBorderColor = colorLoss;
+const upColor = props.colorUp;
+const upBorderColor = props.colorUp;
+const downColor = props.colorDown;
+const downBorderColor = props.colorDown;
 
 // Buy / Sell Signal Colors
 const buySignalColor = '#00ff26';
diff --git a/src/components/charts/CandleChartContainer.vue b/src/components/charts/CandleChartContainer.vue
index 985fea2f..2cdbb9b0 100644
--- a/src/components/charts/CandleChartContainer.vue
+++ b/src/components/charts/CandleChartContainer.vue
@@ -65,7 +65,8 @@
           :use-u-t-c="settingsStore.timezone === 'UTC'"
           :theme="settingsStore.chartTheme"
           :slider-position="sliderPosition"
-          :color-preference="colorStore.colorPreference"
+          :color-down="colorStore.colorDown"
+          :color-up="colorStore.colorUp"
         >
         </CandleChart>
         <div v-else class="m-auto">
diff --git a/src/stores/colors.ts b/src/stores/colors.ts
index 4184aef2..dfd5883c 100644
--- a/src/stores/colors.ts
+++ b/src/stores/colors.ts
@@ -7,17 +7,19 @@ export const useColorStore = defineStore('colorStore', {
   state: () => {
     return {
       colorPreference: 'greenUp',
-      colorProfit: '#12bb7b',
+      colorUp: '#26A69A',
+      colorDown: '#EF5350',
+      colorProfit: '#26A69A', //12bb7b
       colorLoss: '#ef5350',
     };
   },
   getters: {},
   actions: {
     updateProfitLossColor() {
-      const [colorProfit, colorLoss] =
-        this.colorPreference === 'greenUp' ? ['#12bb7b', '#ef5350'] : ['#ef5350', '#12bb7b'];
-      this.colorProfit = colorProfit;
-      this.colorLoss = colorLoss;
+      const [colorUp, colorDown] =
+        this.colorPreference === 'greenUp' ? ['#26A69A', '#ef5350'] : ['#ef5350', '#12bb7b'];
+      this.colorUp = colorUp;
+      this.colorDown = colorDown;
     },
   },
   persist: {