From b25a6d05604e7ca3db986701874d57d0897960db Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Fri, 22 Dec 2023 09:40:37 +0100
Subject: [PATCH] Fix theme colors on stats page

---
 client/src/app/+stats/video/video-stats.component.ts | 6 +++++-
 client/src/sass/bootstrap.scss                       | 2 ++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/client/src/app/+stats/video/video-stats.component.ts b/client/src/app/+stats/video/video-stats.component.ts
index 921718247..e350738da 100644
--- a/client/src/app/+stats/video/video-stats.component.ts
+++ b/client/src/app/+stats/video/video-stats.component.ts
@@ -1,4 +1,4 @@
-import { ChartConfiguration, ChartData, ChartOptions, PluginOptionsByType, Scale, TooltipItem } from 'chart.js'
+import { ChartConfiguration, ChartData, ChartOptions, PluginOptionsByType, Scale, TooltipItem, defaults as ChartJSDefaults } from 'chart.js'
 import zoomPlugin from 'chartjs-plugin-zoom'
 import { Observable, of } from 'rxjs'
 import { SelectOptionsItem } from 'src/types'
@@ -35,6 +35,10 @@ type ChartBuilderResult = {
 
 type Card = { label: string, value: string | number, moreInfo?: string, help?: string }
 
+ChartJSDefaults.backgroundColor = getComputedStyle(document.body).getPropertyValue('--mainBackgroundColor')
+ChartJSDefaults.borderColor = getComputedStyle(document.body).getPropertyValue('--greySecondaryBackgroundColor')
+ChartJSDefaults.color = getComputedStyle(document.body).getPropertyValue('--mainForegroundColor')
+
 @Component({
   templateUrl: './video-stats.component.html',
   styleUrls: [ './video-stats.component.scss' ],
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 435c780c1..e2b22ee0f 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -33,6 +33,8 @@
 
 body {
   --bs-border-color-translucent: #{pvar(--inputBorderColor)};
+
+  --bs-body-color: #{pvar(--mainForegroundColor)};
 }
 
 .accordion {