New feature: Dark mode for front-end editing

[fsbraun]

Description

Since Django 3.2 the admin interface respects "dark mode", i.e. if selected by the user, the admin shows on dark background instead if light background. Dark mode is often used by IT people. Currently, django CMS does not respect a selected dark mode leading to a admin pages partly on dark background, partly on bright background giving the impression of a broken UI design.

This PR introduces changes to the css so than django CMS can respect dark mode in the front-end editing process.

Changes:

• Replaced the $gray sass variables with css custom properties --dca-gray etc. (dca for django CMS association)
• Added different color codes for dark mode for those variables
• Replaced brighten and darken sass functions with css alternatives (mostly transform: brightness() since functions do not work on custom properties.
• Removed a few !important statements to allow other apps to properly adjust their admin forms to dark mode.
• Replaced a few left-over absolute black and white properties with $back and $white to become flexible.
• Reflected @marksweb’s suggestion to have the django CMS color adjusted in dark mode to be better for the eye

Related resources

There is a similar PR for django-cms. With both accepted django CMS will give a nice dark mode design: PR 7245

Checklist

No tests are affected.

• [x] I have opened this pull request against develop
• [ ] I have added or modified the tests when changing logic
• [x] I have followed the conventional commits guidelines to add meaningful information into the changelog
• [x] I have read the contribution guidelines and I have joined #workgroup-pr-review on Slack to find a “pr review buddy” who is going to review my pull request.

[codecov-commenter]

Codecov Report

Merging #443 (83048ac) into master (d6caf92) will not change coverage. The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #443   +/-   ##
=======================================
  Coverage   36.11%   36.11%           
=======================================
  Files           2        2           
  Lines          36       36           
  Branches        1        1           
=======================================
  Hits           13       13           
  Misses         23       23           

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update d6caf92...83048ac. Read the comment docs.