Add separate dark theme color settings
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.
- [x] I have squashed my commits into logic units.
- [x] I have described the changes in the commit messages.
Other information
Preview
Dark theme selected
Light theme selected
@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 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.
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.
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.
@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 Report
All modified and coverable lines are covered by tests :white_check_mark:
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%> (ø) |
@nijel this PR and #12794 are now finished. Also note they depend on each other.
- This first PR does the custom theme setttings
- #12794 consumes those theme settings and applies them.
The issues with the failing tests are resolved now. lol finally 🎉