Support dark mode

[jhonatan-lopes]

• Replaces hardcoded colours for Wagtail-defined ones, except for $color-control and $color-variant
• Defines the --w-color-secondary-100 (#00B0B1) as the control colour for dark theme
• Adds support for dark theme

Fixes #62.

Results:

Chart:

Finished test:

Note: this PR targets Wagtail >=5.0 (when dark theme was introduced). When releasing a version with this patch, support for wagtail <5.0 should be dropped. Wagtail 4.1 LTS is EOL in a week (end of February) and devs are encouraged to migrate to 5.2 LTS.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 88.44%. Comparing base (67945f9) to head (01be244).

Additional details and impacted files

@@           Coverage Diff           @@
##             main      #76   +/-   ##
=======================================
  Coverage   88.44%   88.44%           
=======================================
  Files          15       15           
  Lines         753      753           
  Branches      140      140           
=======================================
  Hits          666      666           
  Misses         51       51           
  Partials       36       36           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[Stormheg]

Thanks @jhonatan-lopes

Could you please include the create ab test form too? It has a couple bright areas in the headings. See the screenshot below.

I wouldn't bother with the help block at the bottom, the styling for that is provided by Wagtail. Wagtail appears to be missing dark mode styling for that

[jhonatan-lopes]

Hey @Stormheg, as we discussed, the "Create an A/B test" form is still using a template based on Wagtail 2.X which is not really great to work with in Wagtail >= 5.X.

I believe we should update how we use this template to be compatible with the new UI/UX instead of trying to change the colours here, as detailed in #79.

[Stormheg]

Love it!