Merge pull request #76 from wagtail-nest/bugfix/62-support-dark-mode

Support dark mode

Author: Stormheg

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>

wagtail_ab_testing/static_src/style/progress.scss

@@ -3,41 +3,37 @@
 $color-control: #0c0073;
 $color-variant: #ef746f;
 
-$light-teal: #e1f0f0;
-$dark-teal: #007273;
-
-$charcoal-grey: #333;
-
 .abtest-progressbar {
     position: relative;
 
     &__sample-size {
         width: 100%;
         height: 160px;
+        fill: var(--w-color-text-placeholder);
     }
 
     &__sample-size line {
-        stroke: black;
+        stroke: var(--w-color-border-field-default);
         stroke-width: 2px;
     }
 
     &__sample-size-bg {
-        fill: $light-teal;
+        fill: var(--w-color-surface-field-inactive);
     }
 
     &__sample-size-bar {
-        fill: $dark-teal;
+        fill: var(--w-color-surface-button-default);
     }
 
     &__sample-size-percentage {
         font-weight: bold;
         font-size: 40px;
-        fill: white;
+        fill: var(--w-color-text-button);
     }
 
     &__sample-size-complete {
         font-size: 17px;
-        fill: white;
+        fill: var(--w-color-text-button);
     }
 }
 
@@ -53,14 +49,23 @@ $charcoal-grey: #333;
         &--control {
             padding-right: 10px;
             color: $color-control;
-
             a {
                 color: $color-control !important;
 
                 &:hover {
                     color: darken($color-control, 10%) !important;
                 }
             }
+            @media (prefers-color-scheme: dark) {
+                color: var(--w-color-secondary-100);
+
+                a {
+                    color: var(--w-color-secondary-100) !important;
+                    &:hover {
+                        color: var(--w-color-secondary-400) !important;
+                    }
+                }
+            }
         }
 
         &--variant {
@@ -87,7 +92,7 @@ $charcoal-grey: #333;
         height: 30px;
         border-bottom-width: 5px;
         border-bottom-style: solid;
-        color: white;
+        color: var(--w-color-text-button);
         text-transform: uppercase;
         text-align: center;
         font-size: 15px;
@@ -104,20 +109,26 @@ $charcoal-grey: #333;
     }
     &__version--control &__version-heading {
         border-bottom-color: $color-control;
+        @media (prefers-color-scheme: dark) {
+            border-bottom-color: var(--w-color-secondary-100);
+        }
     }
     &__version--variant &__version-heading {
         border-bottom-color: $color-variant;
     }
 
     &__version--control &__version-heading--winner {
         background-color: $color-control;
+        @media (prefers-color-scheme: dark) {
+            background-color: var(--w-color-secondary-100);
+        }
     }
     &__version--variant &__version-heading--winner {
         background-color: $color-variant;
     }
 
     &__version-inner {
-        border: 1px solid #eeeeee;
+        border: 1px solid var(--w-color-border-furniture);
         border-top: none;
         box-sizing: border-box;
         padding: 20px;
@@ -134,6 +145,17 @@ $charcoal-grey: #333;
         }
     }
 
+    &__version-title--control {
+        color: $color-control;
+        @media (prefers-color-scheme: dark) {
+            color: var(--w-color-secondary-100);
+        }
+    }
+
+    &__version-title--variant {
+        color: $color-variant;
+    }
+
     &__version-stats {
         list-style-type: none;
         margin: 0;
@@ -161,7 +183,7 @@ $charcoal-grey: #333;
     &__version-stat-name {
         text-transform: uppercase;
         font-size: 20px;
-        color: $charcoal-grey;
+        color: var(--w-color-text-placeholder);
         margin-top: 20px;
 
         span {
@@ -172,4 +194,16 @@ $charcoal-grey: #333;
 
 .abtest-chart {
     padding-top: 20px;
+
+    // Chart lines
+    .c3-axis .tick line,
+    .c3-axis .domain {
+        stroke: var(--w-color-text-label);
+    }
+
+    // Axes text
+    .c3-axis .tick text tspan,
+    .c3-legend-item text {
+        fill: var(--w-color-text-label);
+    }
 }

wagtail_ab_testing/templates/wagtail_ab_testing/results.html

@@ -45,7 +45,7 @@ <h2>{{ ab_test.name }}</h2>
                         {% if control_is_winner %}{% icon "crown" %} {% trans "Winner!" %}{% elif unclear_winner %}{% trans "No clear winner" %}{% endif %}
                     </div>
                     <div class="abtest-results__version-inner">
-                        <h3>{% trans "Control" %} <a href="{% pageurl page %}" target="_blank">{% icon name="link-external" %}</a></h3>
+                        <h3 class="abtest-results__version-title--control">{% trans "Control" %} <a href="{% pageurl page %}" target="_blank">{% icon name="link-external" %}</a></h3>
 
                         <ul class="abtest-results__version-stats">
                             <li>
@@ -79,7 +79,7 @@ <h3>{% trans "Control" %} <a href="{% pageurl page %}" target="_blank">{% icon n
                         {% if variant_is_winner %}{% icon "crown" %} {% trans "Winner!" %}{% elif unclear_winner %}{% trans "No clear winner" %}{% endif %}
                     </div>
                     <div class="abtest-results__version-inner">
-                        <h3>{% trans "Variant" %} <a href="{% url 'wagtailadmin_pages:view_draft' page.id %}" target="_blank">{% icon name="link-external" %}</a></h3>
+                        <h3 class="abtest-results__version-title--variant">{% trans "Variant" %} <a href="{% url 'wagtailadmin_pages:view_draft' page.id %}" target="_blank">{% icon name="link-external" %}</a></h3>
 
                         <ul class="abtest-results__version-stats">
                             <li>