adding dark-mode to the website

[mohamedfenjiro]

Hey there !

This is my first pull-request here, I hope I won't be too damned :)
I am trying to enter and understand the voice-web architecture and stack so I've decided to tackle an ongoing issue.
I know there are many ways to add dark-mode to a website but I found this gem: https://github.com/donavon/use-dark-mode (custom React hook). Let me know what are your thoughts.
The src files were quite hard to go through at first but I managed to understand the Layout component. I have added a small toggle at the left side, modified .css files to stay constant with the colors (needs review and input) and used a html color opposite generator for hexa numbers.

In the midst of my struggle I have added the --profiler option to the yarn build command in the docker settings file to have access to the react dev tool extension, which is sweet for devs: https://addons.mozilla.org/en-US/firefox/addon/react-devtools/

Disclamer: this is a work in progress but that would need eyes on as I think developing this feature could be a great asset to the ppl having vision accessibility issues or just for someone that is hurt from the white light but still want to contribute.

I would especially need help for the color management and .css file all throughout the project as I have probably missed some.

This is linked to issue: github.com/mozilla/voice-web/issues/2533

Thank you so much in advance for your input. I'm here to please the PR requirements and hopefully make this dark-mode work perfectly.

[mohamedfenjiro]

Like I said it is far from perfect, but I would really like some input on the color management and css files modified.
The thing that would greatly help the dark-mode design rely also on the gray color around the boxed components, the pictures show that I have issues working with that.

[mohamedfenjiro]

I have fixed some .css files and the toggle should be perfectly working right now :)
The main issues right now are:

1. Fixing the logo .svg to find an equivalent for dark-mode
2. Fixing .css files to use exclusively the colors from vars.css
3. Fixing the borders on certain components.

This is the actual result at this moment:

The main issue is that each components sometimes needs a custom solution to deal with the colors in .css
PS: I may have some issue with the tabs and prettier settings

[mbransn]

@mohamedfenjiro thanks for submitting this. Agreed dark mode work is important to platform accessibility and is something we want to see done in collaboration with the community. We’ll get to reviewing this as we have engineering availability, though realistically that may be a little while as we are focusing our efforts on other accessibility improvements (primarily infrastructure at the moment).

In the meantime I'd like to keep this open and welcome other community members to offer their review/recommendations. Also, once we have UI library elements available for dark mode support (currently in design) we'll post that link here for you to review and incorporate.

[mohamedfenjiro]

Great! Thank you for the follow-up @mbransn I truly appreciate it. I understand the fact that it is hard to have engineering availability right now but this open PR can be used as a stepping stone to develop this functionality later.
I'll be open to review/recommendations as I wait for your UI library elements, let me know if my toggle can be thrown in the hat :)

Have a great day!