weblate icon indicating copy to clipboard operation
weblate copied to clipboard

Add separate dark theme color settings

Open meel-hd opened this issue 1 year ago • 7 comments

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

Screenshot 2024-09-27 125432

Light theme selected

Screenshot 2024-09-27 125537

meel-hd avatar Sep 27 '24 12:09 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

meel-hd avatar Sep 27 '24 12:09 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.

meel-hd avatar Oct 10 '24 11:10 meel-hd

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.

nijel avatar Oct 14 '24 14:10 nijel

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 avatar Oct 15 '24 10:10 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.

meel-hd avatar Oct 15 '24 10:10 meel-hd

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

Impacted file tree graph

@@            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

codecov[bot] avatar Oct 15 '24 12:10 codecov[bot]

@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 🎉

meel-hd avatar Oct 18 '24 09:10 meel-hd