Dark mode.

components/metrics/BarChart.js

@@ -6,6 +6,8 @@ import { formatLongNumber } from 'lib/format';
 import { dateFormat } from 'lib/lang';
 import useLocale from 'hooks/useLocale';
 import styles from './BarChart.module.css';
+import useTheme from 'hooks/useTheme';
+import { THEME_COLORS } from 'lib/constants';
 
 export default function BarChart({
   chartId,
@@ -23,6 +25,12 @@ export default function BarChart({
   const chart = useRef();
   const [tooltip, setTooltip] = useState({});
   const [locale] = useLocale();
+  const [theme] = useTheme();
+  const colors = {
+    text: THEME_COLORS[theme].gray700,
+    line: THEME_COLORS[theme].gray200,
+    zeroLine: THEME_COLORS[theme].gray500,
+  };
 
   function renderXLabel(label, index, values) {
     const d = new Date(values[index].value);
@@ -97,6 +105,11 @@ export default function BarChart({
       responsive: true,
       responsiveAnimationDuration: 0,
       maintainAspectRatio: false,
+      legend: {
+        labels: {
+          fontColor: colors.text,
+        },
+      },
       scales: {
         xAxes: [
           {
@@ -110,6 +123,7 @@ export default function BarChart({
               callback: renderXLabel,
               minRotation: 0,
               maxRotation: 0,
+              fontColor: colors.text,
             },
             gridLines: {
               display: false,
@@ -123,6 +137,11 @@ export default function BarChart({
             ticks: {
               callback: renderYLabel,
               beginAtZero: true,
+              fontColor: colors.text,
+            },
+            gridLines: {
+              color: colors.line,
+              zeroLineColor: colors.zeroLine,
             },
             stacked,
           },
@@ -144,8 +163,13 @@ export default function BarChart({
   function updateChart() {
     const { options } = chart.current;
 
+    options.legend.labels.fontColor = colors.text;
     options.scales.xAxes[0].time.unit = unit;
     options.scales.xAxes[0].ticks.callback = renderXLabel;
+    options.scales.xAxes[0].ticks.fontColor = colors.text;
+    options.scales.yAxes[0].ticks.fontColor = colors.text;
+    options.scales.yAxes[0].gridLines.color = colors.line;
+    options.scales.yAxes[0].gridLines.zeroLineColor = colors.zeroLine;
     options.animation.duration = animationDuration;
     options.tooltips.custom = renderTooltip;
 
@@ -161,7 +185,7 @@ export default function BarChart({
         updateChart();
       }
     }
-  }, [datasets, unit, animationDuration, locale]);
+  }, [datasets, unit, animationDuration, locale, theme]);
 
   return (
     <>

components/metrics/BarChart.module.css

@@ -3,6 +3,7 @@
 }
 
 .tooltip {
+  color: var(--msgColor);
   pointer-events: none;
   z-index: 1;
 }
@@ -12,7 +13,6 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  color: var(--gray50);
   text-align: center;
 }
 

components/metrics/MetricsTable.module.css

@@ -74,7 +74,7 @@
   position: relative;
   width: 50px;
   color: #6e6e6e;
-  border-left: 1px solid var(--gray600);
+  border-left: 1px solid var(--gray500);
   padding-left: 10px;
   z-index: 1;
 }