diff --git a/src/js/account.js b/src/js/account.js
index e1032ce07..42f59bff3 100644
--- a/src/js/account.js
+++ b/src/js/account.js
@@ -2055,6 +2055,11 @@ function refreshAccountPage() {
       lastTimestamp = date;
     });
 
+    activityChart.data.datasets[0].data = activityChartData_amount;
+    activityChart.data.datasets[1].data = activityChartData_avgWpm;
+
+    activityChart.options.legend.labels.fontColor = themeColors.sub;
+
     activityChart.options.scales.xAxes[0].ticks.minor.fontColor =
       themeColors.sub;
     activityChart.options.scales.yAxes[0].ticks.minor.fontColor =
@@ -2064,17 +2069,13 @@ function refreshAccountPage() {
     activityChart.data.datasets[0].borderColor = themeColors.main;
     activityChart.data.datasets[0].backgroundColor = themeColors.main;
 
-    activityChart.options.legend.labels.fontColor = themeColors.sub;
     activityChart.data.datasets[0].trendlineLinear.style = themeColors.sub;
 
-    activityChart.data.datasets[0].data = activityChartData_amount;
-
     activityChart.options.scales.yAxes[1].ticks.minor.fontColor =
       themeColors.sub;
     activityChart.options.scales.yAxes[1].scaleLabel.fontColor =
       themeColors.sub;
     activityChart.data.datasets[1].borderColor = themeColors.sub;
-    activityChart.data.datasets[1].data = activityChartData_avgWpm;
 
     activityChart.options.legend.labels.fontColor = themeColors.sub;
 
diff --git a/src/js/script.js b/src/js/script.js
index f73cf8a0b..b31ff7001 100644
--- a/src/js/script.js
+++ b/src/js/script.js
@@ -221,6 +221,7 @@ function refreshThemeColorObject() {
   themeColors.colorfulErrorExtra = st
     .getPropertyValue("--colorful-error-extra-color")
     .replace(" ", "");
+  updateChartColors();
 }
 
 function copyResultToClipboard() {
diff --git a/src/js/userconfig.js b/src/js/userconfig.js
index 409155182..088847313 100644
--- a/src/js/userconfig.js
+++ b/src/js/userconfig.js
@@ -1121,6 +1121,66 @@ function setIndicateTypos(it, nosave) {
   if (!nosave) saveConfigToCookie();
 }
 
+function updateChartColors() {
+  hoverChart.options.scales.xAxes[0].ticks.minor.fontColor = themeColors.sub;
+  hoverChart.options.scales.xAxes[0].scaleLabel.fontColor = themeColors.sub;
+  hoverChart.options.scales.yAxes[0].ticks.minor.fontColor = themeColors.sub;
+  hoverChart.options.scales.yAxes[2].ticks.minor.fontColor = themeColors.sub;
+  hoverChart.options.scales.yAxes[0].scaleLabel.fontColor = themeColors.sub;
+  hoverChart.options.scales.yAxes[2].scaleLabel.fontColor = themeColors.sub;
+
+  hoverChart.data.datasets[0].borderColor = themeColors.main;
+  hoverChart.data.datasets[0].pointBackgroundColor = themeColors.main;
+  hoverChart.data.datasets[1].borderColor = themeColors.sub;
+  hoverChart.data.datasets[1].pointBackgroundColor = themeColors.sub;
+
+  hoverChart.options.annotation.annotations[0].borderColor = themeColors.sub;
+  hoverChart.options.annotation.annotations[0].label.backgroundColor =
+    themeColors.sub;
+  hoverChart.options.annotation.annotations[0].label.fontColor = themeColors.bg;
+
+  activityChart.options.legend.labels.fontColor = themeColors.sub;
+
+  activityChart.options.scales.xAxes[0].ticks.minor.fontColor = themeColors.sub;
+  activityChart.options.scales.yAxes[0].ticks.minor.fontColor = themeColors.sub;
+  activityChart.options.scales.yAxes[0].scaleLabel.fontColor = themeColors.sub;
+  activityChart.data.datasets[0].borderColor = themeColors.main;
+  activityChart.data.datasets[0].backgroundColor = themeColors.main;
+
+  activityChart.data.datasets[0].trendlineLinear.style = themeColors.sub;
+
+  activityChart.options.scales.yAxes[1].ticks.minor.fontColor = themeColors.sub;
+  activityChart.options.scales.yAxes[1].scaleLabel.fontColor = themeColors.sub;
+  activityChart.data.datasets[1].borderColor = themeColors.sub;
+
+  activityChart.options.legend.labels.fontColor = themeColors.sub;
+
+  resultHistoryChart.options.scales.xAxes[0].ticks.minor.fontColor =
+    themeColors.sub;
+  resultHistoryChart.options.scales.yAxes[0].ticks.minor.fontColor =
+    themeColors.sub;
+  resultHistoryChart.options.scales.yAxes[0].scaleLabel.fontColor =
+    themeColors.sub;
+  resultHistoryChart.options.scales.yAxes[1].ticks.minor.fontColor =
+    themeColors.sub;
+  resultHistoryChart.options.scales.yAxes[1].scaleLabel.fontColor =
+    themeColors.sub;
+  resultHistoryChart.data.datasets[0].borderColor = themeColors.main;
+  resultHistoryChart.data.datasets[1].borderColor = themeColors.sub;
+
+  resultHistoryChart.options.legend.labels.fontColor = themeColors.sub;
+  resultHistoryChart.data.datasets[0].trendlineLinear.style = themeColors.sub;
+  wpmOverTimeChart.data.datasets[0].borderColor = themeColors.main;
+  wpmOverTimeChart.data.datasets[0].pointBackgroundColor = themeColors.main;
+  wpmOverTimeChart.data.datasets[1].borderColor = themeColors.sub;
+  wpmOverTimeChart.data.datasets[1].pointBackgroundColor = themeColors.sub;
+
+  hoverChart.update();
+  wpmOverTimeChart.update();
+  resultHistoryChart.update();
+  activityChart.update();
+}
+
 function previewTheme(name, setIsPreviewingVar = true) {
   if (
     (testActive || resultVisible) &&