From 9779c70acd60e6df985e78f0f925956a7dcb4bfc Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Tue, 21 Nov 2023 14:05:55 +0000
Subject: [PATCH] style: use theme color for chart gridlines

this makes sure that they are always visible
---
 frontend/src/ts/controllers/chart-controller.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/src/ts/controllers/chart-controller.ts b/frontend/src/ts/controllers/chart-controller.ts
index 4c5876f78..943cad750 100644
--- a/frontend/src/ts/controllers/chart-controller.ts
+++ b/frontend/src/ts/controllers/chart-controller.ts
@@ -1084,10 +1084,13 @@ async function updateColors<
 >(chart: ChartWithUpdateColors<TType, TData, TLabel>): Promise<void> {
   const bgcolor = await ThemeColors.get("bg");
   const subcolor = await ThemeColors.get("sub");
+  const subaltcolor = await ThemeColors.get("subAlt");
   const maincolor = await ThemeColors.get("main");
   const errorcolor = await ThemeColors.get("error");
   const textcolor = await ThemeColors.get("text");
 
+  const gridcolor = Misc.blendTwoHexColors(bgcolor, subaltcolor, 0.75);
+
   //@ts-ignore
   chart.data.datasets[0].borderColor = (ctx): string => {
     const isPb = ctx.raw?.["isPb"];
@@ -1199,6 +1202,9 @@ async function updateColors<
     const axis = chartScaleOptions.scales[scaleID] as CartesianScaleOptions;
     axis.ticks.color = subcolor;
     axis.title.color = subcolor;
+    axis.grid.color = gridcolor;
+    axis.grid.tickColor = gridcolor;
+    axis.grid.borderColor = gridcolor;
   });
 
   try {