Theme Toggling Feature #2972

ayanaar · 2023-10-03T00:51:12Z

This PR addresses the last step in the process of implementing theme support for Pontoon. It introduces the capability for users to seamlessly switch between the platform's existing dark theme and the newly added light theme (Issue #2936 ).

Changes:

New UI Element: Added buttons in the settings page allowing users to select their preferred theme: Dark, Light, or Match System.
Theme Persistence: User theme preference is stored in their profile, ensuring a consistent experience across sessions.
Dynamic Theme Application: Leveraging JavaScript, the theme is applied dynamically without requiring a page reload.
Fallback Mechanism: In case of any issues, the system defaults to the dark theme, ensuring no disruption to the user experience.

Additional Notes:

Future Work:
- Light Theme Creation (Issue Create a new light-theme.css file #2935): The next step will involve the creation of a new light-theme.css file, which will house the variables and styles specific to the light theme.
- The light-mode.css file used in this PR is a placeholder.

pontoon/base/models.py

pontoon/base/migrations/0048_rename_themes_userprofile_theme.py

pontoon/base/models.py

pontoon/base/templates/base.html

pontoon/base/templates/django/base.html

mathjazz · 2023-10-03T12:06:16Z

Nice work!

Please note that the spec has now been updated with the theme selector mockups:
9605154

I'll share the corresponding HTML and CSS with you.

We should also change the tooltips as noted in the spec.

pontoon/base/templates/base.html

pontoon/base/templates/django/base.html

pontoon/contributors/templates/contributors/settings.html

pontoon/contributors/views.py

mathjazz · 2023-10-03T20:30:04Z

Excellent work with the updates! Added a few more minor requests.

pontoon/contributors/urls.py

pontoon/contributors/templates/contributors/settings.html

mathjazz · 2023-10-04T13:14:29Z

Thanks for another set of updates!

I had a closer look at how the toggle logic actually works. Here's my list of proposals:

System theme does not get applied. Themes are applied by setting the corresponding class on the <body> element, which results in the use of the right theme file. Since we don't have a system-theme.css file, setting system-theme on the <body> element doesn't apply any of the theme files. If the system theme is set, we should detect what it is and set light-theme / dark-theme class accordingly. It would also be nice to add an event handler (as used in the Stackoverflow) that will change the theme immediately after it is changed in the OS.
Changing the theme doesn't seem to apply in the Translate view.
In order to prevent the error triggered on theme switch, you'll need to make the selector at https://github.com/mozilla/pontoon/blob/main/pontoon/contributors/static/js/settings.js#L3 more specific, to make sure it doesn't apply to the theme selector.
Changes to the specs/ folder need to be excluded from the PR. You'll need to rebase against the main branch.

mathjazz · 2023-10-11T12:06:32Z

pontoon/base/static/js/themeSwitcher.js

+    ) {
+      return 'dark';
+    } else {
+      return 'light';


We should default to dark, not light. So if the user sets "System" in Pontoon and "Auto" on macOS, she should get the dark theme. Right now she gets the light theme.

pontoon/base/static/js/themeSwitcher.js

translate/public/translate.html

pontoon/translate/views.py

pontoon/contributors/templates/contributors/settings.html

pontoon/settings/base.py

pontoon/base/templates/base.html

pontoon/base/static/js/theme-switcher.js

…tem settings.

mathjazz

Just a couple of comments left!

What is the status of applying the theme in the translate view?

Please also look into the failing tests.

pontoon/contributors/templates/contributors/settings.html

pontoon/base/templates/base.html

translate/public/translate.html

translate/src/context/Theme.tsx

mathjazz · 2023-10-17T15:06:24Z

Just noticed that the insights pages (e.g. http://localhost:8000/sl/insights/ and http://localhost:8000/projects/firefox/insights/ appear to be broken (JS error).

To fix that, we should use document.body (points to <body>) instead of document.documentElement (points to <html>) in places like:
https://github.com/mozilla/pontoon/blob/main/pontoon/insights/static/js/insights_tab.js#L7

And also get rid of trim() after style.getPropertyValue().

pontoon/base/templates/base.html

translate/src/context/Theme.tsx

mathjazz · 2023-10-17T19:37:51Z

Nice work with the updates!

I've kicked the pytest - I only have 3 failing tests locally.
As discussed, there is a JS error on the /profile when the system theme is selected. I'll take a look.

mathjazz

Great work - the core functionality is there!

Pytest is failing due to a conflicting migration. We have recently landed an existing migration 0047, so you'll need to rename yours to 0048 and update the dependency migration: pontoon/base/static/css/light-theme.css.

We also need to get rid of the eslint warnings.

pontoon/base/templates/base.html

mathjazz

Excellent job!

Now we need to fix the tests and possibly rebase and we're ready to merge.

mathjazz · 2023-10-18T21:52:04Z

As discussed on Slack, we should probably revert the last commit and remove "theme" from the form.

As for the rebase, I suggest you create a fresh branch out of the current main, git apply the patch, remove the changes in the specs folder and push to a new PR.

mathjazz · 2023-10-19T17:23:48Z

Works like a charm! Woohoo! 🥳

Continuing in #2996.

Implements theme toggle in the /settings page. Adds the light theme CSS file with the same values as in the dark theme CSS file. Theme toggle in the Profile Menu and the actual light theme CSS file will be submitted in a followup. --------- Co-authored-by: Ayanaa Rahman <ayanaa.rahman@mail.utoronto.ca>

Intial theme toggle within settings page

b85d15e

ayanaar requested a review from mathjazz October 3, 2023 00:51

Add theme selector mockups (mozilla#2971)

9605154

mathjazz reviewed Oct 3, 2023

View reviewed changes

ayanaar added 6 commits October 3, 2023 15:28

Intial theme toggle within settings page

09a018a

Make suggested changes and add updated UI

b169c96

Resolving conflicts

b309221

Deleting old migration

776df7f

Update UserProfile model

b308185

Satisfy linters

4793129

mathjazz reviewed Oct 3, 2023

View reviewed changes

ayanaar added 4 commits October 3, 2023 18:03

Add requested changes

e7f93df

Satisfy linters

0ff60fd

Remove extra space

b8865f8

Add link to dark-theme.css in base.html

771f4d1

mathjazz reviewed Oct 4, 2023

View reviewed changes

pontoon/contributors/urls.py Outdated Show resolved Hide resolved

mathjazz reviewed Oct 4, 2023

View reviewed changes

pontoon/contributors/templates/contributors/settings.html Outdated Show resolved Hide resolved

flodolo changed the title ~~Theme Toggling Feauture~~ Theme Toggling Feature Oct 5, 2023

ayanaar added 2 commits October 10, 2023 18:26

Add updates

4f14364

Remove extra theme-switcher.js file

2982ad1

mathjazz reviewed Oct 11, 2023

View reviewed changes

Update theme-switcher.js and translate.html

9340418

mathjazz reviewed Oct 12, 2023

View reviewed changes

ayanaar added 2 commits October 12, 2023 12:01

Implemented dynamic theme switching based on user preferences and sys…

c99db80

…tem settings.

Fix spacing in settings.html

b7bbe71

mathjazz marked this pull request as ready for review October 12, 2023 16:08

mathjazz reviewed Oct 13, 2023

View reviewed changes

pontoon/contributors/templates/contributors/settings.html Outdated Show resolved Hide resolved

pontoon/base/templates/base.html Outdated Show resolved Hide resolved

ayanaar added 4 commits October 16, 2023 13:09

Add system theme switching in translate view

90b707c

Remove console.log statements

34f18a6

Satisfy linters

8b5a713

Satisfy prettier

5e8960e