IMplement theming for candlechart

src/components/charts/CandleChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="row flex-grow-1 chart-wrapper">
-    <v-chart v-if="hasData" theme="dark" autoresize :options="chartOptions" />
+    <v-chart v-if="hasData" :theme="theme" autoresize :options="chartOptions" />
   </div>
 </template>
 
@@ -41,6 +41,8 @@ export default class CandleChart extends Vue {
 
   @Prop({ required: true }) plotConfig!: PlotConfig;
 
+  @Prop({ default: 'dark' }) theme!: string;
+
   buyData = [] as Array<number>[];
 
   sellData = [] as Array<number>[];
@@ -95,7 +97,7 @@ export default class CandleChart extends Vue {
         text: `${this.strategy} - ${this.pair} - ${this.timeframe}`,
         show: true,
       },
-      backgroundColor: '#1b1b1b',
+      // backgroundColor: '#1b1b1b',
       useUTC: this.useUTC,
       animation: false,
       legend: {

src/components/charts/CandleChartContainer.vue

@@ -45,6 +45,7 @@
         :trades="trades"
         :plot-config="plotConfig"
         :use-u-t-c="useUTC"
+        :theme="getChartTheme"
       >
       </CandleChart>
       <label v-else style="margin: auto auto; font-size: 1.5rem">No data available</label>
@@ -54,7 +55,7 @@
 
 <script lang="ts">
 import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
-import { namespace } from 'vuex-class';
+import { Getter, namespace } from 'vuex-class';
 import {
   Trade,
   PairHistory,
@@ -96,6 +97,8 @@ export default class CandleChartContainer extends Vue {
 
   plotConfigName = '';
 
+  @Getter getChartTheme!: string;
+
   @ftbot.State availablePlotConfigNames!: Array<string>;
 
   @ftbot.Action setPlotConfigName;