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

Separate color settings for dark theme in apepearance customization #9372

Closed
tomkolp opened this issue Jun 9, 2023 · 8 comments · Fixed by #12613
Closed

Separate color settings for dark theme in apepearance customization #9372

tomkolp opened this issue Jun 9, 2023 · 8 comments · Fixed by #12613
Assignees
@meel-hd
Labels
enhancement Adding or requesting a new feature. good first issue Opportunity for newcoming contributors. hacktoberfest This is suitable for Hacktoberfest. Don’t try to spam. help wanted Extra attention is needed.
Milestone
5.9

Comments

@tomkolp
Copy link
Contributor

tomkolp commented Jun 9, 2023

Describe the problem

Currently, the color settings are the same for light and dark theme. There should be separate color settings for dark and light theme.

Describe the solution you'd like

Ability to change the color of each theme.

Describe alternatives you've considered

No response

Screenshots

No response

Additional context

No response
@nijel nijel added enhancement Adding or requesting a new feature. hacktoberfest This is suitable for Hacktoberfest. Don’t try to spam. help wanted Extra attention is needed. good first issue Opportunity for newcoming contributors. labels Jun 9, 2023
@github-actions
Copy link

github-actions bot commented Jun 9, 2023

This issue seems to be a good fit for newbie contributors. You are welcome to contribute to Weblate! Don't hesitate to ask any questions you would have while implementing this.

You can learn about how to get started in our contributors documentation.

@mjp-riley
Copy link

mjp-riley commented Jun 30, 2023 •
edited
Loading

@nijel I'm assuming this has been solved given your update a few weeks ago? I noticed the current solution is to load the dark css file unless the user has set the theme setting to light, nearly doubling the css load time for the default setting and 2/3 of the total options. The change also does therefore not take place until after settings page reload. Would a better solution not be to get rid of the dark css file and alter the original css file to use custom properties for different theme on the :root? - See Codepen / sc

Similar implementation of the js on #switcher in the example could be implemented on clicking save in the settings menu so change takes place immediately rather than on page reload. Then on page reload you would use the same logic as you currently use but instead of the settings change deciding whether a stylesheet is included it would just load the html tag with a data-theme attribute for their choice. If they select auto on settings load it without the attribute and the @media prefers dark kicks in if this is their system setting. Alternatively store the setting in storage and negate the need for the if statement in the html file at all, if they switch browsers and the value cant be found then get it from the backend.

Let me know if this is still an open issue that needs contribution or if there's a reason you decided to go the route that you have rather than this approach I'd appreciate some insights as to why so I can continue to learn.

@nijel
Copy link
Member

nijel commented Jun 30, 2023

@mjp-riley This issue is about supporting appearance customization in the dark theme. Rigth now there is a single customization option which applies to both dark and light themes.

I noticed the current solution is to load the dark css file unless the user has set the theme setting to light

The dark theme is loaded only if the user agent prefers a dark theme using media query.

Using variables would make things definitely easier, but Bootstrap 3 (which we currently use) is not really ready for this. There is an issue for upgrading, but nobody is working on it: #2916

@nijel
Copy link
Member

nijel commented Sep 20, 2024

@meel-hd this will need a backend changes as well, but I think we could start with using CSS variables for the existing customization and then build the dark theme customization on top of that?

@meel-hd
Copy link
Collaborator

meel-hd commented Sep 20, 2024

I don't think we have to change the backend for persisting each user's preferred theme.

By default, the first time a user loads the app we select either light, dark, or based on the system theme. Then later he can change that based on his preference and we store that in local storage.

@nijel
Copy link
Member

nijel commented Sep 20, 2024

This is not for persisting user theme, this is for customizing color theme for Weblate instance. You can access it at /manage/appearance/ URL.

@nijel
Copy link
Member

nijel commented Sep 20, 2024

Very limited docs is here: https://docs.weblate.org/en/latest/admin/admin.html#manage-appearance

@nijel nijel changed the title "dark theme" separate color settings Separate color settings for dark theme in apeparance customization Sep 20, 2024
@nijel nijel changed the title Separate color settings for dark theme in apeparance customization Separate color settings for dark theme in apepearance customization Sep 20, 2024
@meel-hd meel-hd mentioned this issue Sep 27, 2024
Merged
5 tasks
@nijel nijel added this to the 5.9 milestone Oct 3, 2024
nijel pushed a commit that referenced this issue Nov 6, 2024
@meel-hd
feat: Add custom css dark theme customization (#12794)
a8b4647 
* Add custom css dark theme customization

- The custom.css consumes the custom theme colors and use them.
- Added a custom split filter for spliting the passed in 2 hex colors string.
- Added tests.

(depends on PR #12613)

* Fix test fails of custom.css theme settings

This commit fixes the  test fails previously appeared. Mainly due to incorrect logic and use of incorrect color variables in the template.

Changes:
- Refactored custom.css and  made CustomCssView  handle custom theme settings instead of the css template.
- also removed the no longer used custom_filters.py and test_custom_filters.py

Dependes on PR: #12613

* Add tests to split_colors

Fixes #9372
@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 6, 2024

Thank you for your report; the issue you have reported has just been fixed.

  • In case you see a problem with the fix, please comment on this issue.
  • In case you see a similar problem, please open a separate issue.
  • If you are happy with the outcome, don’t hesitate to support Weblate by making a donation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@meel-hd meel-hd

Labels
enhancement Adding or requesting a new feature. good first issue Opportunity for newcoming contributors. hacktoberfest This is suitable for Hacktoberfest. Don’t try to spam. help wanted Extra attention is needed.
Projects
None yet
Milestone
5.9
Development

Successfully merging a pull request may close this issue.

Add separate dark theme color settings meel-hd/weblate
4 participants
@nijel @tomkolp @meel-hd @mjp-riley