Skip to content

Commit

Permalink
Merge pull request #76 from wagtail-nest/bugfix/62-support-dark-mode
Browse files Browse the repository at this point in the history 
Support dark mode
  • Loading branch information
@Stormheg
Stormheg authored Mar 22, 2024
2 parents 67945f9 + 01be244 commit 2f48af2
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 19 deletions.
38 changes: 35 additions & 3 deletions wagtail_ab_testing/static_src/main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -19,7 +33,7 @@ document.addEventListener('DOMContentLoaded', () => {
return;
}

c3.generate({
const chart = c3.generate({
bindto: chartElement,
data: JSON.parse(chartElement.getAttribute('data')!),
padding: {
Expand All @@ -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>
Expand Down
62 changes: 48 additions & 14 deletions wagtail_ab_testing/static_src/style/progress.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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 {
Expand All @@ -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);
}
}
4 changes: 2 additions & 2 deletions wagtail_ab_testing/templates/wagtail_ab_testing/results.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 2f48af2

Please sign in to comment.