Feature/299 implement dark mode

[dbaslan]

This branch implements dark mode to the web app, in line with our stretch goal. 😎 Please let me know if I've missed any text or buttons, otherwise awaiting approval. The implementation is a bit rudimentary, all it does is darken the background image and the header color, and turn the headers and text white where necessary. It does not make use of Material UI's built-in dark mode, and I had to use inline CSS on a bunch of elements to get it done. It would be too chaotic otherwise. See #299

[dbaslan]

Here are some screenshots:

[ckertam]

I need to test it more after I test it I will make my comment

[sadikkuzu]

I have some comments and tiny little change-requests.
Thanks in advance.

[sadikkuzu]

Dark Mode button:

I think (255,255,255) button-label-color is better than (0,0,0)
wdyt @dbaslan ?

before:

after:

[sadikkuzu]

Previous/Next buttons

I cannot see button labels in dark mode:

light:

dark:

[dbaslan]

Tried a bunch of solutions for the buttons, nothing worked. In the end I made the buttons disappear when disabled (i.e. when there is no previous or next page). Changed the dark mode button text color as per @sadikkuzu's request and fixed some minor visibility issues as well.

[sadikkuzu]

Create Memory page (Include time):

• Normal Date
• Interval Date

[sadikkuzu]

Create Memory page (location alias):

[sadikkuzu]

Tried a bunch of solutions for the buttons, nothing worked. In the end I made the buttons disappear when disabled (i.e. when there is no previous or next page). Changed the dark mode button text color as per @sadikkuzu's request and fixed some minor visibility issues as well.

Cool solution 👍🏼

[dbaslan]

Done and done @sadikkuzu 👍

[ckertam]

LGTM! It was our dream I guess 😅

[sadikkuzu]

Perfecto 👌🏼