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

Dark mode optimization. #59

Merged
merged 9 commits into from
May 18, 2022
Merged

Dark mode optimization. #59

merged 9 commits into from
May 18, 2022

Conversation

plaskier
Copy link
Collaborator

  • Auto dark mode based on system preference.
  • Manual toggle switch at the bottom of the page.
  • Instant and dynamic responding.

plaskier and others added 2 commits May 17, 2022 10:34
@plaskier
Dark mode optimization.
d4772f6 
- Auto dark mode based on system preference.
- Manual toggle switch at the bottom of the page.
- Instant and dynamic responding.
@plaskier
default.html. Optimization on dark mode button.
3999568
@theagora
Copy link
Contributor

theagora commented May 17, 2022 •
edited
Loading

Feedback for further improvement

  • Theme toggling working on mobile FF, but not on desktop // may not work on old browsers
  • Font inconsistency in frontpage, /hkers, /c1, /c2, and posts
  • Footer changes to be reconsidered
Before After Dark Light
Front image image1 image2

@theagora theagora added the enhancement New feature or request label May 17, 2022
@theagora theagora mentioned this pull request May 17, 2022
Open
2 tasks
@theagora
Copy link
Contributor

Font (and color) issues in each post may still exist, in mobile/desktop views.

Feedback for further improvement

* ~Theme toggling working on mobile FF, but not on desktop~ // may not work on old browsers

* [ ]  Font inconsistency in frontpage, /hkers, /c1, /c2, and posts

* [x]  Footer changes to be reconsidered

@plaskier
Copy link
Collaborator Author

Trying to fix font color and font family issues by rewriting CSS files. CSS files are being rewritten by using variables instead of specific values in each CSS files.

The default font color and font families will be kept the same.

@plaskier
Copy link
Collaborator Author

Major updates on dark theme

  • Rewrite CSS based on variables, which is easier for future adjustment.
  • Adjust text colors in dark mode that look milder.
  • The default font families in both theme, and the font color in light theme remain the same.
  • Fix the problem of dark mode not working on devices with smaller screen.

@plaskier
Copy link
Collaborator Author

Dark theme button seems broken. Further debugging is needed. The dark theme still cannot be implemented.

@plaskier
Copy link
Collaborator Author

Issue on the logic of switching Light-Dark Theme is found

By inspecting element, the problem occurs when the class of <body has both parameters, dark-theme and light-theme.

When both parameter exists, for example, if you are in system light mode, then you are most likely to have the web page set to dark mode. Therefore if now you change the system theme preference and set to dark mode, the web page would turn to an annoying light mode.

The solution is under development.

@theagora
Copy link
Contributor

Make sense to extend design perspective to qualitative perspective.
Well, I'd suggest squash merge first and release as a touchstone for this feature. Ongoing optimization may also include usability and user experience despite no rigid formula.

@plaskier
Copy link
Collaborator Author

An attempt to import three condition of the toggle makes sense, which is auto, dark, and light.

In dark or light condition, user preference would override system preference. But if it is set to auto, then the system preference takes over. In this way the logic is much clearer.

The main script has been optimized. Now the issues is to decide where to put the button.

@plaskier
Add auto theme option to theme switch.
6268660 
- Toggle option: dark, light, auto.
- Reformat some files.
- Fix the logic conflict of theme switch.
@plaskier
Copy link
Collaborator Author

I believe now the dark mode could be implemented for using.

Now the decision logic for switching themes is like this:

  • If the user chooses 'Auto', then the system preference decides whether it is light or dark.
  • If the user chooses 'Light' or 'Dark', then the webpage theme is fully controlled by the user's choice. Changing system preference now will not affect the web page.
  • User's manual preference would be stored in local storage, which is 'Light', 'Dark', or 'Auto'.

@theagora
Copy link
Contributor

@plaskier Great job! You have the access rights to manage this repo's issues and PR. Once this PR is (squash) merged, I can create a release then.

@theagora theagora added the RELEASE Reserved for release candidates label May 18, 2022
@theagora theagora merged commit 8d0eec4 into agorahub:0x10 May 18, 2022
@theagora
Copy link
Contributor

v16.6
#3 (comment)
#53 (comment)

@theagora theagora linked an issue Jun 14, 2022 that may be closed by this pull request
New Features Waitlist #3
Open
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@theagora theagora theagora approved these changes

Assignees

@plaskier plaskier

Labels
enhancement New feature or request RELEASE Reserved for release candidates
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

New Features Waitlist
2 participants
@plaskier @theagora