Dark mode optimization.

agorahub / pen0

The Republic of Agora ⓪ https://agorahub.github.io/pen0

https://agorahub.github.io/pen0

26 stars 4 forks source link

Dark mode optimization. #59

Closed plaskier closed 2 years ago

plaskier commented 2 years ago

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

theagora commented 2 years ago

Feedback for further improvement

~~Theme toggling working on mobile FF, but not on desktop~~ ~~// may not work on old browsers~~
[x] Font inconsistency in frontpage, /hkers, /c1, /c2, and posts
[x] Footer changes to be reconsidered

Before	After	Dark	Light

theagora commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

plaskier commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

v16.6 https://github.com/agorahub/pen0/issues/3#issuecomment-1128469721 https://github.com/agorahub/pen0/discussions/53#discussioncomment-2773590