diff --git a/public/v1/js/ff/charts.js b/public/v1/js/ff/charts.js
index 57bc4ff9ce..441ff18e39 100644
--- a/public/v1/js/ff/charts.js
+++ b/public/v1/js/ff/charts.js
@@ -410,13 +410,13 @@ function drawAChart(URL, container, chartType, options, colorData) {
                             mode: 'vertical',
                             scaleID: 'x-axis-0',
                             value: drawVerticalLine,
-                            borderColor: 'red',
+                            borderColor: lineColor,
                             borderWidth: 1,
                             label: {
                                 backgroundColor: 'rgba(0,0,0,0)',
                                 fontFamily: "sans-serif",
                                 fontSize: 12,
-                                fontColor: "#333",
+                                fontColor: lineTextColor,
                                 position: "right",
                                 xAdjust: -20,
                                 yAdjust: -125,
diff --git a/resources/views/index.twig b/resources/views/index.twig
index 9460cc2342..fc8dbe05b2 100644
--- a/resources/views/index.twig
+++ b/resources/views/index.twig
@@ -169,6 +169,12 @@
 {% endblock %}
 {% block scripts %}
     <script type="text/javascript" nonce="{{ JS_NONCE }}">
+        var lineColor = 'red';
+        var lineTextColor = '#000';
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            var lineColor = '#a00';
+            var lineTextColor = '#bec5cb';
+        }
         var billCount = {{ billCount }};
         var accountFrontpageUrl = '{{ route('chart.account.frontpage') }}';
         var accountRevenueUrl = '{{ route('chart.account.revenue') }}';