Darkmode for Web Interface

gramps-project / gramps-web

Frontend for Gramps Web

https://www.grampsweb.org

GNU Affero General Public License v3.0

397 stars 51 forks source link

Darkmode for Web Interface #145

Open onlynow2 opened 1 year ago

onlynow2 commented 1 year ago

It would be nice, having the option for toggeling light / dark mode. Possible location would be in the settings menu or next to the search / profile icon top right.

DavidMStraub commented 1 year ago

I agree this would be something that some users might find useful. Personally, I will not work on it since it's a huge amount of work for a feature I will not use. If someone wants to tackle this, please self-assign and I can provide guidance if needed.

zeitchef commented 9 months ago

I might be interested in looking into this. @DavidMStraub Are there any guidelines regarding dark mode design tokens, or would this still need to be sorted?

DavidMStraub commented 9 months ago

Hi, that would be great! There are no guidelines yet. However, over the next month, I expect we will slowly start migrating the components from the legacy material components v0.25 to the new material web v1.0, which has built-in support for themes as far as I can see. Perhaps we can already start using those conventions? Does that help?

At the moment, the main colors are set here using the CSS variables of the old material components: https://github.com/gramps-project/Gramps.js/blob/main/src/SharedStyles.js#L10-L15

However, there are still many components that have hard-coded colors (e.g. shades of gray), that will have to be adapted.

Some suggestions for implementing the dark mode switch:

We can store the user preference in local storage using the existing functions updateSettings and getSettings
I suggest to put the theme selection on the user settings page where also the language selector is located

zeitchef commented 8 months ago

Hi @DavidMStraub - I've got some time this week and would like to dig into this a bit. I've hit my first glitch though, after setting up a dev environment, I can't seem to register a test user - every combination I've tried just returns a 409 error. Is there a dedicated test user I can use to login with, or a pattern I can use to register one? Thanks.

DavidMStraub commented 8 months ago

Hi, how did you set up the dev environment? If you use this https://www.grampsweb.org/dev-frontend/setup/, user accounts should already be there, see https://github.com/gramps-project/gramps-web/blob/main/dev/Dockerfile.api#L19-L24

By the way, since I last commented here, I have started adding Material Web components (md-) and added the new CSS variables. I suggest we use those for theming and fill in the colors for the "old" mwc- components until we have completely migrated to Material Web.

https://github.com/gramps-project/gramps-web/blob/main/src/SharedStyles.js#L20-L70 https://material-web.dev/theming/material-theming/

DavidMStraub commented 8 months ago

(Confusingly, in the new Material Web, components and CSS variables start with md-, while in the old version components started with mwc- and CSS variables with mdc-.)