Setup chart colours dynamically

wagtail-nest · Mar 22, 2024 · 34c5238 · 34c5238
1 parent 777d717
commit 34c5238
Showing 1 changed file with 35 additions and 3 deletions.
diff --git a/wagtail_ab_testing/static_src/main.tsx b/wagtail_ab_testing/static_src/main.tsx
@@ -10,6 +10,20 @@ document.addEventListener('DOMContentLoaded', () => {
     // Goal selector on create new A/B test
     initGoalSelector();
 
+    const colorControl = '#0C0073'; // CSS $color-control
+    const colorControlDark = '#00B0B1'; // Wagtail --w-color-secondary-100
+    const colorVariant = '#EF746F'; // CSS $color-variant
+
+    // Match chart pattern colors to dark/light mode
+    let pattern = [colorControl, colorVariant];
+    if (
+        window.matchMedia &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches
+    ) {
+        // dark mode
+        pattern = [colorControlDark, colorVariant];
+    }
+
     // Charts on A/B test progress
     document.querySelectorAll('[component="chart"]').forEach((chartElement) => {
         if (
@@ -19,7 +33,7 @@ document.addEventListener('DOMContentLoaded', () => {
             return;
         }
 
-        c3.generate({
+        const chart = c3.generate({
             bindto: chartElement,
             data: JSON.parse(chartElement.getAttribute('data')!),
             padding: {
@@ -34,12 +48,30 @@ document.addEventListener('DOMContentLoaded', () => {
                 },
             },
             color: {
-                pattern: ['#0C0073', '#EF746F'],
+                pattern: pattern,
             },
         });
+
+        // Add an event listener to update chart colors when the color scheme changes
+        window
+            .matchMedia('(prefers-color-scheme: dark)')
+            .addEventListener('change', (event) => {
+                const newColorScheme = event.matches ? 'dark' : 'light';
+                if (newColorScheme === 'dark') {
+                    chart.data.colors({
+                        Control: colorControlDark,
+                        Variant: colorVariant,
+                    });
+                } else {
+                    chart.data.colors({
+                        Control: colorControl,
+                        Variant: colorVariant,
+                    });
+                }
+            });
     });
 
-    // A/B testing tab on page edito
+    // A/B testing tab on page editor
     if (abTestingTabProps) {
         $('ul.tab-nav').append(`<li role="tab" aria-controls="tab-abtesting">
             <a href="#tab-abtesting" class="">${gettext('A/B testing')}</a>