Add separate dark theme color settings

[meel-hd]

Proposed changes

• Modifed the form to have two color fields (one for dark and one for light theme).
• The colors are stored in this form"#ffffff,#000000". Where the first one is for light theme and the other for dark theme.
• Then the custom.css consumes the values and performs a split(defined in custom_filters.py) on the color string to get the two colors.
• Those colors then are defined in css variables and consumed by the elements that need them.
• The css variables change base on the current theme (for dark values to be applied it is expected that the body tag has data-theme="dark")

Closes: #9372

Checklist

• Lint and unit tests pass locally with my changes.
• I have added tests that prove my fix is effective or that my feature works.
• I have added documentation to describe my feature.
• I have squashed my commits into logic units.
• I have described the changes in the commit messages.

Other information

Preview

Dark theme selected

Light theme selected

[meel-hd]

@nijel I am still working on this. I should add the data-theme attr to the body tag based on the current theme. However, I would love some early feedback

[nijel]

What is missing is a migration path. When user currently has customized theme, he will get all black dark theme:

Probably the best approach would be to do a database migration on upgrade to fix the affected settings.

[meel-hd]

@nijel I got overwhelmed by this previous test fail it says it is missing a header_color variable in a dozen of tests. I don't know why and what to do. Any guides or thoughts would be helpful. Thanks.

[nijel]

I currently don't see what might be causing that.

Can we split this PR into two? One would introduce using variables in the custom CSS without doing any functional change and second would then add the dark theme customization? That way, we limit what might be causing the failures.

[meel-hd]

Thanks for the suggestion. I'll go ahead and split the PR into two as you recommended. I'll first focus on the dark theme customization and then follow up with introducing the variables into the custom CSS in a separate PR.

[meel-hd]

@nijel the previous commit ac1289b above, makes this PR concerned only with the dark theme customization. I'll continue in another PR that depends on this one where the custom CSS variables will be consumed and used.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 91.16%. Comparing base (a3fa4b4) to head (cb4455d).
Report is 4077 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #12613      +/-   ##
==========================================
+ Coverage   91.14%   91.16%   +0.01%     
==========================================
  Files         596      596              
  Lines       60938    61216     +278     
  Branches     9646     6349    -3297     
==========================================
+ Hits        55544    55807     +263     
- Misses       3723     3757      +34     
+ Partials     1671     1652      -19     

Files with missing lines	Coverage Δ
weblate/wladmin/forms.py	100.00% <100.00%> (ø)
weblate/wladmin/tests.py	100.00% <100.00%> (ø)

... and 49 files with indirect coverage changes

[meel-hd]

@nijel this PR and #12794 are now finished. Also note they depend on each other.

• This first PR does the custom theme setttings
• Add custom css dark theme customization #12794 consumes those theme settings and applies them.

The issues with the failing tests are resolved now. lol finally 🎉