Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add separate dark theme color settings #12613

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Add separate dark theme color settings #12613

wants to merge 4 commits into from
+161 −70

Conversation

meel-hd
Copy link
Collaborator

@meel-hd meel-hd commented Sep 27, 2024 •
edited
Loading

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

Screenshot 2024-09-27 125432

Light theme selected

Screenshot 2024-09-27 125537

@meel-hd
Add separte dark theme color settings
129e2f8 
- 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"`)
@meel-hd meel-hd marked this pull request as draft September 27, 2024 12:21
@meel-hd
Copy link
Collaborator Author

meel-hd commented Sep 27, 2024

@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 meel-hd marked this pull request as ready for review September 28, 2024 10:28
@meel-hd meel-hd requested a review from nijel September 28, 2024 10:29
nijel
nijel reviewed Oct 3, 2024
View reviewed changes
Copy link
Member

@nijel nijel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

obrazek

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

weblate/wladmin/forms.py Show resolved Hide resolved
@nijel nijel added this to the 5.9 milestone Oct 3, 2024
meel-hd and others added 2 commits October 4, 2024 13:27
@meel-hd
Fix dark theme color fields
37222f7 
- Insure backward compatibility with previous theme color settings.

- In the new implementation it considers if there was previous color settings. If so it applies them to dark theme colors too.
@meel-hd
Merge branch 'main' into add-seperate-dark_theme-color-settings
9c696ec
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@nijel nijel nijel left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
5.9
Development

Successfully merging this pull request may close these issues.

Separate color settings for dark theme in apepearance customization
2 participants
@meel-hd @nijel